<template>
  <!-- 视频播放框 -->
  <div class="videoShow-WaiKe">
    <!-- 视频播放框 -->
    <div class="videoPlayerBox" ref="videoPlayerWH" :class="[{noneCursor:isNone},{videoHtml:isQp}]" @mouseenter="mouseMove" @mouseleave="mouseStop" @mousemove="mouseIng">
      <div class="videoName" ref="videoName">
        <span class="fontHt videoName0ne" >酷爱电影的庞波小姐</span>
      </div>
      <video class="video-de" ref="videoMy" :src="videoUrl2" @click="startPlayer()" poster="http://mcgamehome.love/img/videoback.jpg">
<!--        <source id="source" :src="videoUrl2"  type="application/x-mpegURL">-->
      </video>
      <div class="bottomTimeWaiKe" ref="timeNew2W" style="display: none">
        <div class="bottomTime" ref="timeNew2"></div>
      </div>
      <!-- 视频控制条 -->
      <div class="videoController" ref="videoController" @mouseenter="mouseCMove" @mouseleave="mouseCStop">
        <div class="bufferWaiKe">
          <!-- 视频进度条 -->
          <div class="sp-jdt" ref="timeAll" @mouseenter="iconMove" @mouseleave="iconStop" @click="clickVideo" @mousemove="mousePointerIng">
            <div class="videoNewTime" ref="timePointer" :class="{None: !isYes}">
              <div class="timePointer-top"></div>
              <div class="timePointer-bottom"></div>
            </div>
            <div class="videoTimeWaiKe">
              <div class="videoPlayerTimeNew" ref="timeNew">
                <!-- 图标 -->
                <div class="videoIcon" :class="{None: !isYes}" style="width: 18px;height: 18px;" ref="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="18" height="18"
                       preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
                    <defs>
                      <clipPath id="__lottie_element_25">
                        <rect width="18" height="18" x="0" y="0"></rect>
                      </clipPath>
                    </defs>
                    <g clip-path="url(#__lottie_element_25)">
                      <g transform="matrix(1,0,0,1,8.937000274658203,8.25)" opacity="0.14" style="display: block;">
                        <g opacity="1" transform="matrix(1,0,0,1,0.07500000298023224,1.2130000591278076)">
                          <path fill="rgb(251,114,153)" fill-opacity="1"
                                d=" M9,-3.5 C9,-3.5 9,3.5 9,3.5 C9,5.707600116729736 7.207600116729736,7.5 5,7.5 C5,7.5 -5,7.5 -5,7.5 C-7.207600116729736,7.5 -9,5.707600116729736 -9,3.5 C-9,3.5 -9,-3.5 -9,-3.5 C-9,-5.707600116729736 -7.207600116729736,-7.5 -5,-7.5 C-5,-7.5 5,-7.5 5,-7.5 C7.207600116729736,-7.5 9,-5.707600116729736 9,-3.5z">
                          </path>
                        </g>
                      </g>
                      <g transform="matrix(1,0,0,1,9.140999794006348,8.67199993133545)" opacity="0.28" style="display: block;">
                        <g opacity="1" transform="matrix(1,0,0,1,-0.1509999930858612,0.7990000247955322)">
                          <path fill="rgb(251,114,153)" fill-opacity="1"
                                d=" M8,-3 C8,-3 8,3 8,3 C8,4.931650161743164 6.431650161743164,6.5 4.5,6.5 C4.5,6.5 -4.5,6.5 -4.5,6.5 C-6.431650161743164,6.5 -8,4.931650161743164 -8,3 C-8,3 -8,-3 -8,-3 C-8,-4.931650161743164 -6.431650161743164,-6.5 -4.5,-6.5 C-4.5,-6.5 4.5,-6.5 4.5,-6.5 C6.431650161743164,-6.5 8,-4.931650161743164 8,-3z">
                          </path>
                        </g>
                      </g>
                      <g transform="matrix(0.9883429408073425,-0.7275781631469727,0.6775955557823181,0.920446515083313,7.3224687576293945,-0.7606706619262695)"
                         opacity="1" style="display: block;">
                        <g opacity="1"
                           transform="matrix(0.9937776327133179,-0.11138220876455307,0.11138220876455307,0.9937776327133179,-2.5239999294281006,1.3849999904632568)">
                          <path fill="rgb(0,0,0)" fill-opacity="1"
                                d=" M0.75,-1.25 C0.75,-1.25 0.75,1.25 0.75,1.25 C0.75,1.663925051689148 0.4139249920845032,2 0,2 C0,2 0,2 0,2 C-0.4139249920845032,2 -0.75,1.663925051689148 -0.75,1.25 C-0.75,1.25 -0.75,-1.25 -0.75,-1.25 C-0.75,-1.663925051689148 -0.4139249920845032,-2 0,-2 C0,-2 0,-2 0,-2 C0.4139249920845032,-2 0.75,-1.663925051689148 0.75,-1.25z">
                          </path>
                        </g>
                      </g>
                      <g transform="matrix(1.1436611413955688,0.7535901665687561,-0.6317168474197388,0.9587040543556213,16.0070743560791,2.902894973754883)"
                         opacity="1" style="display: block;">
                        <g opacity="1"
                           transform="matrix(0.992861807346344,0.1192704513669014,-0.1192704513669014,0.992861807346344,-2.5239999294281006,1.3849999904632568)">
                          <path fill="rgb(0,0,0)" fill-opacity="1"
                                d=" M0.75,-1.25 C0.75,-1.25 0.75,1.25 0.75,1.25 C0.75,1.663925051689148 0.4139249920845032,2 0,2 C0,2 0,2 0,2 C-0.4139249920845032,2 -0.75,1.663925051689148 -0.75,1.25 C-0.75,1.25 -0.75,-1.25 -0.75,-1.25 C-0.75,-1.663925051689148 -0.4139249920845032,-2 0,-2 C0,-2 0,-2 0,-2 C0.4139249920845032,-2 0.75,-1.663925051689148 0.75,-1.25z">
                          </path>
                        </g>
                      </g>
                      <g transform="matrix(1,0,0,1,8.890999794006348,8.406000137329102)" opacity="1" style="display: block;">
                        <g opacity="1" transform="matrix(1,0,0,1,0.09099999815225601,1.1009999513626099)">
                          <path fill="rgb(255,255,255)" fill-opacity="1"
                                d=" M7,-3 C7,-3 7,3 7,3 C7,4.379749774932861 5.879749774932861,5.5 4.5,5.5 C4.5,5.5 -4.5,5.5 -4.5,5.5 C-5.879749774932861,5.5 -7,4.379749774932861 -7,3 C-7,3 -7,-3 -7,-3 C-7,-4.379749774932861 -5.879749774932861,-5.5 -4.5,-5.5 C-4.5,-5.5 4.5,-5.5 4.5,-5.5 C5.879749774932861,-5.5 7,-4.379749774932861 7,-3z">
                          </path>
                          <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
                                stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="1.5"
                                d=" M7,-3 C7,-3 7,3 7,3 C7,4.379749774932861 5.879749774932861,5.5 4.5,5.5 C4.5,5.5 -4.5,5.5 -4.5,5.5 C-5.879749774932861,5.5 -7,4.379749774932861 -7,3 C-7,3 -7,-3 -7,-3 C-7,-4.379749774932861 -5.879749774932861,-5.5 -4.5,-5.5 C-4.5,-5.5 4.5,-5.5 4.5,-5.5 C5.879749774932861,-5.5 7,-4.379749774932861 7,-3z">
                          </path>
                        </g>
                      </g>
                      <g transform="matrix(1,0,0,1,8.89900016784668,8.083999633789062)" opacity="1" style="display: block;">
                        <g opacity="1" transform="matrix(1,0,0,1,-2.5239999294281006,1.3849999904632568)">
                          <path fill="rgb(0,0,0)" fill-opacity="1"
                                d=" M0.875,-1.125 C0.875,-1.125 0.875,1.125 0.875,1.125 C0.875,1.607912540435791 0.48291251063346863,2 0,2 C0,2 0,2 0,2 C-0.48291251063346863,2 -0.875,1.607912540435791 -0.875,1.125 C-0.875,1.125 -0.875,-1.125 -0.875,-1.125 C-0.875,-1.607912540435791 -0.48291251063346863,-2 0,-2 C0,-2 0,-2 0,-2 C0.48291251063346863,-2 0.875,-1.607912540435791 0.875,-1.125z">
                          </path>
                        </g>
                      </g>
                      <g transform="matrix(1,0,0,1,14.008999824523926,8.083999633789062)" opacity="1" style="display: block;">
                        <g opacity="1" transform="matrix(1,0,0,1,-2.5239999294281006,1.3849999904632568)">
                          <path fill="rgb(0,0,0)" fill-opacity="1"
                                d=" M0.8999999761581421,-1.100000023841858 C0.8999999761581421,-1.100000023841858 0.8999999761581421,1.100000023841858 0.8999999761581421,1.100000023841858 C0.8999999761581421,1.596709966659546 0.4967099726200104,2 0,2 C0,2 0,2 0,2 C-0.4967099726200104,2 -0.8999999761581421,1.596709966659546 -0.8999999761581421,1.100000023841858 C-0.8999999761581421,1.100000023841858 -0.8999999761581421,-1.100000023841858 -0.8999999761581421,-1.100000023841858 C-0.8999999761581421,-1.596709966659546 -0.4967099726200104,-2 0,-2 C0,-2 0,-2 0,-2 C0.4967099726200104,-2 0.8999999761581421,-1.596709966659546 0.8999999761581421,-1.100000023841858z">
                          </path>
                        </g>
                      </g>
                    </g>
                  </svg>
                </div>
              </div>
            </div>
            <!-- 缓冲条 -->
            <div class="sp-hc" ref="videoHc">

            </div>
          </div>
        </div>
        <!-- 视频控制 -->
        <div class="videoControllerSetting" >
          <div class="flex-left p-r">
<!--            <div class="pause">-->
<!--            </div>-->
            <div class="bf">
              <svg @click="startPlayer()" xmlns="http://www.w3.org/2000/svg" ref="pause"  viewBox="0 0 28 28" preserveAspectRatio="xMidYMid meet" style="transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_259"><rect width="28" height="28" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_259)"><g transform="matrix(1,0,0,1,14,14)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path></g></g><g transform="matrix(0.9999988079071045,0,0,0.9999988079071045,24.812000274658203,14)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path></g></g><g transform="matrix(1,0,0,1,4,14)" opacity="0.000002877960266118862" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d="M0 0"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path></g><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-7.031000137329102,-10.875 C-7.031000137329102,-10.875 -8.32800006866455,-11.25 -9.42199993133545,-10.468999862670898 C-10.109999656677246,-9.906999588012695 -10,-7.992000102996826 -10,-7.992000102996826 C-10,-7.992000102996826 -10,8.015999794006348 -10,8.015999794006348 C-10,8.015999794006348 -10.125,10.241999626159668 -9,10.991999626159668 C-7.875,11.741999626159668 -5,10.031000137329102 -5,10.031000137329102 C-5,10.031000137329102 7.968999862670898,1.875 7.968999862670898,1.875 C7.968999862670898,1.875 9,1.062000036239624 9,0 C9,-1.062000036239624 7.968999862670898,-1.937999963760376 7.968999862670898,-1.937999963760376 C7.968999862670898,-1.937999963760376 -7.031000137329102,-10.875 -7.031000137329102,-10.875z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M-7.031000137329102,-10.875 C-7.031000137329102,-10.875 -8.32800006866455,-11.25 -9.42199993133545,-10.468999862670898 C-10.109999656677246,-9.906999588012695 -10,-7.992000102996826 -10,-7.992000102996826 C-10,-7.992000102996826 -10,8.015999794006348 -10,8.015999794006348 C-10,8.015999794006348 -10.125,10.241999626159668 -9,10.991999626159668 C-7.875,11.741999626159668 -5,10.031000137329102 -5,10.031000137329102 C-5,10.031000137329102 7.968999862670898,1.875 7.968999862670898,1.875 C7.968999862670898,1.875 9,1.062000036239624 9,0 C9,-1.062000036239624 7.968999862670898,-1.937999963760376 7.968999862670898,-1.937999963760376 C7.968999862670898,-1.937999963760376 -7.031000137329102,-10.875 -7.031000137329102,-10.875z"></path></g></g></g></svg>

              <svg @click="startPlayer()" class="squirtle-svg-icon" ref="bf" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M17.982 9.275L8.06 3.27A2.013 2.013 0 005 4.994v12.011a2.017 2.017 0 003.06 1.725l9.922-6.005a2.017 2.017 0 000-3.45z"></path></svg>
            </div>
            <div class="nextOne">
              <svg class="squirtle-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M16 5a1 1 0 00-1 1v4.615a1.431 1.431 0 00-.615-.829L7.21 5.23A1.439 1.439 0 005 6.445v9.11a1.44 1.44 0 002.21 1.215l7.175-4.555a1.436 1.436 0 00.616-.828V16a1 1 0 002 0V6C17 5.448 16.552 5 16 5z"></path></svg>
            </div>
            <div class="sp-before-time">
              <span class="fontHt" v-text="startTime"></span><span class="timeFG">/</span><span class="fontHt" v-text="endTime"></span>
            </div>
          </div>
          <div class="flex-right">
<!--            <span class="svgBox fontHt qxd">AUTO</span>-->
            <span class="svgBox fontHt bs" @mouseenter="mouseInBs(bsBox,bsIcon,15,600)" @mouseleave="mouseOutBs(bsBox)" ref="bsIcon">倍速</span>
            <span class="svgBox zm">
												<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 88" width="112" height="88" preserveAspectRatio="xMidYMid meet" style="transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_253"><rect width="112" height="88" x="0" y="0"></rect></clipPath><filter id="__lottie_element_258" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"><feComponentTransfer in="SourceGraphic"><feFuncA type="table" tableValues="1.0 0.0"></feFuncA></feComponentTransfer></filter><mask id="__lottie_element_257" mask-type="alpha"><g filter="url(#__lottie_element_258)"><rect width="112" height="88" x="0" y="0" fill="#ffffff" opacity="0">
												</rect><g transform="matrix(1,0,0,1,60.672000885009766,42.452999114990234)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,-0.5,-0.5)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-33.94157409667969,-28.281574249267578 C-35.50258255004883,-29.84258270263672 -35.50258255004883,-32.377418518066406 -33.94157409667969,-33.93842697143555 C-33.94157409667969,-33.93842697143555 -33.93842697143555,-33.94157409667969 -33.93842697143555,-33.94157409667969 C-32.377418518066406,-35.50258255004883 -29.84258270263672,-35.50258255004883 -28.281574249267578,-33.94157409667969 C-28.281574249267578,-33.94157409667969 33.94157409667969,28.281574249267578 33.94157409667969,28.281574249267578 C35.50258255004883,29.84258270263672 35.50258255004883,32.377418518066406 33.94157409667969,33.93842697143555 C33.94157409667969,33.93842697143555 33.93842697143555,33.94157409667969 33.93842697143555,33.94157409667969 C32.377418518066406,35.50258255004883 29.84258270263672,35.50258255004883 28.281574249267578,33.94157409667969 C28.281574249267578,33.94157409667969 -33.94157409667969,-28.281574249267578 -33.94157409667969,-28.281574249267578z"></path></g></g></g></mask></defs><g clip-path="url(#__lottie_element_253)"><g mask="url(#__lottie_element_257)" style="display: block;"><g transform="matrix(1,0,0,1,56,44)" opacity="1"><g opacity="1" transform="matrix(4,0,0,4,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M3.7920000553131104,-4.800000190734863 C3.7920000553131104,-4.800000190734863 2.8320000171661377,-4.800000190734863 2.8320000171661377,-4.800000190734863 C2.8320000171661377,-4.800000190734863 2.8320000171661377,-4.179999828338623 2.8320000171661377,-4.179999828338623 C2.8320000171661377,-4.179999828338623 0.4519999921321869,-4.179999828338623 0.4519999921321869,-4.179999828338623 C0.4519999921321869,-4.179999828338623 0.4519999921321869,-3.390000104904175 0.4519999921321869,-3.390000104904175 C0.4519999921321869,-3.390000104904175 2.8320000171661377,-3.390000104904175 2.8320000171661377,-3.390000104904175 C2.8320000171661377,-3.390000104904175 2.8320000171661377,-2.990000009536743 2.8320000171661377,-2.990000009536743 C2.8320000171661377,-2.990000009536743 3.7920000553131104,-2.990000009536743 3.7920000553131104,-2.990000009536743 C3.7920000553131104,-2.990000009536743 3.7920000553131104,-3.390000104904175 3.7920000553131104,-3.390000104904175 C3.7920000553131104,-3.390000104904175 6.271999835968018,-3.390000104904175 6.271999835968018,-3.390000104904175 C6.271999835968018,-3.390000104904175 6.271999835968018,-2.990000009536743 6.271999835968018,-2.990000009536743 C6.271999835968018,-2.990000009536743 7.2220001220703125,-2.990000009536743 7.2220001220703125,-2.990000009536743 C7.2220001220703125,-2.990000009536743 7.2220001220703125,-3.390000104904175 7.2220001220703125,-3.390000104904175 C7.2220001220703125,-3.390000104904175 9.661999702453613,-3.390000104904175 9.661999702453613,-3.390000104904175 C9.661999702453613,-3.390000104904175 9.661999702453613,-4.179999828338623 9.661999702453613,-4.179999828338623 C9.661999702453613,-4.179999828338623 7.2220001220703125,-4.179999828338623 7.2220001220703125,-4.179999828338623 C7.2220001220703125,-4.179999828338623 7.2220001220703125,-4.800000190734863 7.2220001220703125,
												-4.800000190734863 C7.2220001220703125,-4.800000190734863 6.271999835968018,-4.800000190734863 6.271999835968018,-4.800000190734863 C6.271999835968018,-4.800000190734863 6.271999835968018,-4.179999828338623 6.271999835968018,-4.179999828338623 C6.271999835968018,-4.179999828338623 3.7920000553131104,-4.179999828338623 3.7920000553131104,-4.179999828338623 C3.7920000553131104,-4.179999828338623 3.7920000553131104,-4.800000190734863 3.7920000553131104,-4.800000190734863z M7.619999885559082,-2.2079999446868896 C7.619999885559082,-2.2079999446868896 7.619999885559082,-1.628000020980835 7.619999885559082,-1.628000020980835 C7.619999885559082,-1.628000020980835 2.499000072479248,-1.628000020980835 2.499000072479248,-1.628000020980835 C2.499000072479248,-1.628000020980835 2.499000072479248,-2.2079999446868896 2.499000072479248,-2.2079999446868896 C2.499000072479248,-2.2079999446868896 7.619999885559082,-2.2079999446868896 7.619999885559082,-2.2079999446868896z M-5.114999771118164,-4.900000095367432 C-5.114999771118164,-4.900000095367432 -6.065999984741211,-4.599999904632568 -6.065999984741211,-4.599999904632568 C-5.895999908447266,-4.349999904632568 -5.736000061035156,-4.050000190734863 -5.5960001945495605,-3.7799999713897705 C-5.5960001945495605,-3.7799999713897705 -9.604999542236328,-3.7799999713897705 -9.604999542236328,-3.7799999713897705 C-9.604999542236328,-3.7799999713897705 -9.604999542236328,-1.5299999713897705 -9.604999542236328,-1.5299999713897705 C-9.604999542236328,-1.5299999713897705 -8.645000457763672,-1.5299999713897705 -8.645000457763672,-1.5299999713897705 C-8.645000457763672,-1.5299999713897705 -8.645000457763672,-2.8499999046325684 -8.645000457763672,-2.8499999046325684 C-8.645000457763672,-2.8499999046325684 -1.7960000038146973,-2.8499999046325684 -1.7960000038146973,-2.8499999046325684 C-1.7960000038146973,-2.8499999046325684 -1.7960000038146973,-1.5299999713897705 -1.7960000038146973,-1.5299999713897705 C-1.7960000038146973,-1.5299999713897705 -0.7960000038146973,-1.5299999713897705 -0.7960000038146973,-1.5299999713897705 C-0.7960000038146973,-1.5299999713897705 -0.7960000038146973,-3.7799999713897705 -0.7960000038146973,-3.7799999713897705 C-0.7960000038146973,-3.7799999713897705 -4.435999870300293,-3.7799999713897705 -4.435999870300293,-3.7799999713897705 C-4.585999965667725,-4.119999885559082 -4.84499979019165,-4.550000190734863 -5.114999771118164,-4.900000095367432z M7.619999885559082,-1.062999963760376 C7.619999885559082,-1.062999963760376 7.619999885559082,-0.46299999952316284 7.619999885559082,-0.46299999952316284 C7.619999885559082,-0.46299999952316284 2.499000072479248,-0.46299999952316284 2.499000072479248,-0.46299999952316284 C2.499000072479248,-0.46299999952316284 2.499000072479248,-1.062999963760376 2.499000072479248,-1.062999963760376 C2.499000072479248,-1.062999963760376 7.619999885559082,-1.062999963760376 7.619999885559082,-1.062999963760376z M6.513999938964844,1.3819999694824219 C6.734000205993652,1.6419999599456787 6.994999885559082,1.8919999599456787 7.284999847412109,2.121999979019165 C7.284999847412109,2.121999979019165 5.484000205993652,2.121999979019165 5.484000205993652,2.121999979019165 C5.484000205993652,2.121999979019165 5.484000205993652,1.5720000267028809 5.484000205993652,1.5720000267028809 C5.484000205993652,1.5720000267028809 4.534999847412109,1.5720000267028809 4.534999847412109,1.5720000267028809 C4.534999847412109,1.5720000267028809 4.534999847412109,2.121999979019165 4.534999847412109,2.121999979019165 C4.534999847412109,2.121999979019165 2.813999891281128,
												2.121999979019165 2.813999891281128,2.121999979019165 C3.114000082015991,1.8919999599456787 3.3949999809265137,1.6419999599456787 3.634999990463257,1.3819999694824219 C3.634999990463257,1.3819999694824219 6.513999938964844,1.3819999694824219 6.513999938964844,1.3819999694824219z M-2.930000066757202,-1.8550000190734863 C-2.930000066757202,-1.8550000190734863 -3.1500000953674316,-1.8049999475479126 -3.1500000953674316,-1.8049999475479126 C-3.1500000953674316,-1.8049999475479126 -7.960000038146973,-1.8049999475479126 -7.960000038146973,-1.8049999475479126 C-7.960000038146973,-1.8049999475479126 -7.960000038146973,-0.8949999809265137 -7.960000038146973,-0.8949999809265137 C-7.960000038146973,-0.8949999809265137 -4.130000114440918,-0.8949999809265137 -4.130000114440918,-0.8949999809265137 C-4.610000133514404,-0.5049999952316284 -5.179999828338623,-0.0949999988079071 -5.71999979019165,0.17499999701976776 C-5.71999979019165,0.17499999701976776 -5.71999979019165,0.7850000262260437 -5.71999979019165,0.7850000262260437 C-5.71999979019165,0.7850000262260437 -9.699999809265137,0.7850000262260437 -9.699999809265137,0.7850000262260437 C-9.699999809265137,0.7850000262260437 -9.699999809265137,1.715000033378601 -9.699999809265137,1.715000033378601 C-9.699999809265137,1.715000033378601 -5.71999979019165,1.715000033378601 -5.71999979019165,1.715000033378601 C-5.71999979019165,1.715000033378601 -5.71999979019165,3.6449999809265137 -5.71999979019165,3.6449999809265137 C-5.71999979019165,3.7750000953674316 -5.769999980926514,3.825000047683716 -5.900000095367432,3.8450000286102295 C-5.900000095367432,3.8450000286102295 -6.210000038146973,3.8550000190734863 -6.210000038146973,3.8550000190734863 C-6.210000038146973,3.8550000190734863 -6.71999979019165,3.8550000190734863 -6.71999979019165,3.8550000190734863 C-6.980000019073486,3.8550000190734863 -7.269999980926514,3.8450000286102295 -7.559999942779541,3.8350000381469727 C-7.400000095367432,4.085000038146973 -7.199999809265137,4.525000095367432 -7.139999866485596,4.815000057220459 C-7.139999866485596,4.815000057220459 -6.650000095367432,4.815000057220459 -6.650000095367432,4.815000057220459 C-6.650000095367432,4.815000057220459 -6.21999979019165,4.795000076293945 -6.21999979019165,4.795000076293945 C-5.820000171661377,4.784999847412109 -5.5,4.735000133514404 -5.25,4.644999980926514 C-4.820000171661377,4.494999885559082 -4.679999828338623,4.224999904632568 -4.679999828338623,3.674999952316284 C-4.679999828338623,3.674999952316284 -4.679999828338623,1.715000033378601 -4.679999828338623,1.715000033378601 C-4.679999828338623,1.715000033378601 -0.699999988079071,1.715000033378601 -0.699999988079071,1.715000033378601 C-0.699999988079071,1.715000033378601 -0.699999988079071,0.7850000262260437 -0.699999988079071,0.7850000262260437 C-0.699999988079071,0.7850000262260437 -4.679999828338623,0.7850000262260437 -4.679999828338623,0.7850000262260437 C-4.679999828338623,0.7850000262260437 -4.679999828338623,0.4950000047683716 -4.679999828338623,0.4950000047683716 C-3.7899999618530273,-0.014999999664723873 -2.9100000858306885,-0.6949999928474426 -2.2699999809265137,-1.3550000190734863 C-2.2699999809265137,-1.3550000190734863 -2.930000066757202,-1.8550000190734863 -2.930000066757202,-1.8550000190734863z M8.600000381469727,-2.805000066757202 C8.600000381469727,-2.805000066757202 1.559999942779541,-2.805000066757202 1.559999942779541,-2.805000066757202 C1.559999942779541,-2.805000066757202 1.559999942779541,0.13500000536441803 1.559999942779541,0.13500000536441803 C1.559999942779541,0.13500000536441803 3.5,
												0.13500000536441803 3.5,0.13500000536441803 C3.4000000953674316,0.3050000071525574 3.2899999618530273,0.4650000035762787 3.1500000953674316,0.6150000095367432 C3.1500000953674316,0.6150000095367432 0.38999998569488525,0.6150000095367432 0.38999998569488525,0.6150000095367432 C0.38999998569488525,0.6150000095367432 0.38999998569488525,1.3849999904632568 0.38999998569488525,1.3849999904632568 C0.38999998569488525,1.3849999904632568 2.3499999046325684,1.3849999904632568 2.3499999046325684,1.3849999904632568 C1.7999999523162842,1.8250000476837158 1.0800000429153442,2.2249999046325684 0.20000000298023224,2.5250000953674316 C0.3799999952316284,2.684999942779541 0.6399999856948853,3.0450000762939453 0.75,3.265000104904175 C1.2200000286102295,3.075000047683716 1.6399999856948853,2.875 2.0299999713897705,2.6449999809265137 C2.0299999713897705,2.6449999809265137 2.0299999713897705,4.614999771118164 2.0299999713897705,4.614999771118164 C2.0299999713897705,4.614999771118164 2.9600000381469727,4.614999771118164 2.9600000381469727,4.614999771118164 C2.9600000381469727,4.614999771118164 2.9600000381469727,2.884999990463257 2.9600000381469727,2.884999990463257 C2.9600000381469727,2.884999990463257 4.539999961853027,2.884999990463257 4.539999961853027,2.884999990463257 C4.539999961853027,2.884999990463257 4.539999961853027,4.824999809265137 4.539999961853027,4.824999809265137 C4.539999961853027,4.824999809265137 5.480000019073486,4.824999809265137 5.480000019073486,4.824999809265137 C5.480000019073486,4.824999809265137 5.480000019073486,2.884999990463257 5.480000019073486,2.884999990463257 C5.480000019073486,2.884999990463257 7.239999771118164,2.884999990463257 7.239999771118164,2.884999990463257 C7.239999771118164,2.884999990463257 7.239999771118164,3.734999895095825 7.239999771118164,3.734999895095825 C7.239999771118164,3.8450000286102295 7.190000057220459,3.875 7.079999923706055,3.875 C7.079999923706055,3.875 6.570000171661377,3.865000009536743 6.570000171661377,3.865000009536743 C6.46999979019165,3.865000009536743 6.360000133514404,3.865000009536743 6.25,3.865000009536743 C6.349999904632568,4.085000038146973 6.460000038146973,4.364999771118164 6.5,4.59499979019165 C6.5,4.59499979019165 6.920000076293945,4.59499979019165 6.920000076293945,4.59499979019165 C7.309999942779541,4.59499979019165 7.599999904632568,4.574999809265137 7.809999942779541,4.485000133514404 C8.100000381469727,4.355000019073486 8.170000076293945,4.15500020980835 8.170000076293945,3.744999885559082 C8.170000076293945,3.744999885559082 8.170000076293945,2.7049999237060547 8.170000076293945,2.7049999237060547 C8.550000190734863,2.924999952316284 8.960000038146973,3.0950000286102295 9.369999885559082,3.2249999046325684 C9.479999542236328,3.005000114440918 9.739999771118164,2.6549999713897705 9.9399995803833,2.494999885559082 C9.069999694824219,2.2750000953674316 8.199999809265137,1.875 7.559999942779541,1.3849999904632568 C7.559999942779541,1.3849999904632568 9.699999809265137,1.3849999904632568 9.699999809265137,1.3849999904632568 C9.699999809265137,1.3849999904632568 9.699999809265137,0.6150000095367432 9.699999809265137,0.6150000095367432 C9.699999809265137,0.6150000095367432 4.260000228881836,0.6150000095367432 4.260000228881836,0.6150000095367432 C4.369999885559082,0.4650000035762787 4.46999979019165,0.3050000071525574 4.570000171661377,0.13500000536441803 C4.570000171661377,0.13500000536441803 8.600000381469727,0.13500000536441803 8.600000381469727,0.13500000536441803 C8.600000381469727,0.13500000536441803 8.600000381469727,-2.805000066757202 8.600000381469727,
												-2.805000066757202z M10,-6.5 C11.100000381469727,-6.5 12,-5.599999904632568 12,-4.5 C12,-4.5 12,4.492000102996826 12,4.492000102996826 C12,5.5920000076293945 11.100000381469727,6.492000102996826 10,6.492000102996826 C10,6.492000102996826 -10,6.492000102996826 -10,6.492000102996826 C-11.100000381469727,6.492000102996826 -12,5.5920000076293945 -12,4.492000102996826 C-12,4.492000102996826 -12,-4.5 -12,-4.5 C-12,-5.599999904632568 -11.100000381469727,-6.5 -10,-6.5 C-10,-6.5 10,-6.5 10,-6.5z"></path></g></g></g><g transform="matrix(1,0,0,1,54.422000885009766,47.577999114990234)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,-0.5,-0.5)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-33.94157409667969,-28.281574249267578 C-35.50258255004883,-29.84258270263672 -35.50258255004883,-32.377418518066406 -33.94157409667969,-33.93842697143555 C-33.94157409667969,-33.93842697143555 -33.93842697143555,-33.94157409667969 -33.93842697143555,-33.94157409667969 C-32.377418518066406,-35.50258255004883 -29.84258270263672,-35.50258255004883 -28.281574249267578,-33.94157409667969 C-28.281574249267578,-33.94157409667969 33.94157409667969,28.281574249267578 33.94157409667969,28.281574249267578 C35.50258255004883,29.84258270263672 35.50258255004883,32.377418518066406 33.94157409667969,33.93842697143555 C33.94157409667969,33.93842697143555 33.93842697143555,33.94157409667969 33.93842697143555,33.94157409667969 C32.377418518066406,35.50258255004883 29.84258270263672,35.50258255004883 28.281574249267578,33.94157409667969 C28.281574249267578,33.94157409667969 -33.94157409667969,-28.281574249267578 -33.94157409667969,-28.281574249267578z"></path></g></g></g></svg>
											</span>
            <span class="svgBox yl" ref="volumeIcon">
											<svg @mouseenter="mouseInBs(volumeController,volumeIcon,5,600)" @mouseleave="mouseOutBs(volumeController)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" width="88" height="88" preserveAspectRatio="xMidYMid meet" style="transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_58"><rect width="88" height="88" x="0" y="0"></rect></clipPath><clipPath id="__lottie_element_60"><path d="M0,0 L88,0 L88,88 L0,88z"></path></clipPath></defs><g clip-path="url(#__lottie_element_58)"><g clip-path="url(#__lottie_element_60)" transform="matrix(1,0,0,1,0,0)" opacity="1" style="display: block;"><g transform="matrix(1,0,0,1,28,44)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M15.5600004196167,-25.089000701904297 C15.850000381469727,-24.729000091552734 16,-24.288999557495117 16,-23.839000701904297 C16,-23.839000701904297 16,23.840999603271484 16,23.840999603271484 C16,24.94099998474121 15.100000381469727,25.840999603271484 14,25.840999603271484 C13.550000190734863,25.840999603271484 13.109999656677246,25.680999755859375 12.75,25.400999069213867 C12.75,25.400999069213867 -4,12.00100040435791 -4,12.00100040435791 C-4,12.00100040435791 -8,12.00100040435791 -8,12.00100040435791 C-12.420000076293945,12.00100040435791 -16,8.420999526977539 -16,4.000999927520752 C-16,4.000999927520752 -16,-3.999000072479248 -16,-3.999000072479248 C-16,-8.418999671936035 -12.420000076293945,-11.99899959564209 -8,-11.99899959564209 C-8,-11.99899959564209 -4,-11.99899959564209 -4,-11.99899959564209 C-4,-11.99899959564209 12.75,-25.39900016784668 12.75,-25.39900016784668 C13.609999656677246,-26.089000701904297 14.869999885559082,-25.948999404907227 15.5600004196167,-25.089000701904297z"></path></g></g><g style="display: none;" transform="matrix(1.0113698244094849,0,0,1.0113698244094849,56.0764274597168,44.00048828125)" opacity="0.0034781257475950157"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-4,-13.859000205993652 C0.7799999713897705,-11.08899974822998 4,-5.919000148773193 4,0.0010000000474974513 C4,5.921000003814697 0.7799999713897705,11.090999603271484 -4,13.861000061035156 C-4,13.861000061035156 -4,-13.859000205993652 -4,-13.859000205993652z"></path></g></g><g style="display: none;" transform="matrix(1.0126574039459229,0,0,1.0126574039459229,64.37825012207031,44.0057487487793)" opacity="0.01598830293967552"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-6.236000061035156,-28.895999908447266 C4.803999900817871,-23.615999221801758 11.984000205993652,-12.456000328063965 11.984000205993652,-0.006000000052154064 C11.984000205993652,12.454000473022461 4.794000148773193,23.624000549316406 -6.265999794006348,28.893999099731445 C-8.255999565124512,29.8439998626709 -10.645999908447266,29.003999710083008 -11.595999717712402,27.003999710083008 C-12.545999526977539,25.013999938964844 -11.696000099182129,22.624000549316406 -9.706000328063965,21.673999786376953 C-1.406000018119812,17.724000930786133 3.9839999675750732,9.343999862670898 3.9839999675750732,-0.006000000052154064 C3.9839999675750732,-9.345999717712402 -1.3960000276565552,-17.715999603271484 -9.675999641418457,-21.676000595092773 C-11.675999641418457,-22.625999450683594 -12.515999794006348,-25.016000747680664 -11.565999984741211,-27.006000518798828 C-10.616000175476074,-29.006000518798828 -8.22599983215332,-29.84600067138672 -6.236000061035156,-28.895999908447266z"></path></g></g><g style="display: none;" transform="matrix(1.0002179145812988,0,0,1.0002179145812988,56.00299835205078,44)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-4,-13.859000205993652 C0.7799999713897705,-11.08899974822998 4,-5.919000148773193 4,0.0010000000474974513 C4,5.921000003814697 0.7799999713897705,11.090999603271484 -4,13.861000061035156 C-4,13.861000061035156 -4,-13.859000205993652 -4,-13.859000205993652z"></path></g></g><g style="display: none;" transform="matrix(1.000209927558899,0,0,1.000209927558899,64.00399780273438,44.00699996948242)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-6.236000061035156,-28.895999908447266 C4.803999900817871,-23.615999221801758 11.984000205993652,-12.456000328063965 11.984000205993652,-0.006000000052154064 C11.984000205993652,12.454000473022461 4.794000148773193,23.624000549316406 -6.265999794006348,28.893999099731445 C-8.255999565124512,29.8439998626709 -10.645999908447266,29.003999710083008 -11.595999717712402,27.003999710083008 C-12.545999526977539,25.013999938964844 -11.696000099182129,22.624000549316406 -9.706000328063965,21.673999786376953 C-1.406000018119812,17.724000930786133 3.9839999675750732,9.343999862670898 3.9839999675750732,-0.006000000052154064 C3.9839999675750732,-9.345999717712402 -1.3960000276565552,-17.715999603271484 -9.675999641418457,-21.676000595092773 C-11.675999641418457,-22.625999450683594 -12.515999794006348,-25.016000747680664 -11.565999984741211,-27.006000518798828 C-10.616000175476074,-29.006000518798828 -8.22599983215332,-29.84600067138672 -6.236000061035156,-28.895999908447266z"></path></g></g><g transform="matrix(1,0,0,1,56,44)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-4,-13.859000205993652 C0.7799999713897705,-11.08899974822998 4,-5.919000148773193 4,0.0010000000474974513 C4,5.921000003814697 0.7799999713897705,11.090999603271484 -4,13.861000061035156 C-4,13.861000061035156 -4,-13.859000205993652 -4,-13.859000205993652z"></path></g></g><g transform="matrix(1,0,0,1,64.01399993896484,44.00699996948242)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-6.236000061035156,-28.895999908447266 C4.803999900817871,-23.615999221801758 11.984000205993652,-12.456000328063965 11.984000205993652,-0.006000000052154064 C11.984000205993652,12.454000473022461 4.794000148773193,23.624000549316406 -6.265999794006348,28.893999099731445 C-8.255999565124512,29.8439998626709 -10.645999908447266,29.003999710083008 -11.595999717712402,27.003999710083008 C-12.545999526977539,25.013999938964844 -11.696000099182129,22.624000549316406 -9.706000328063965,21.673999786376953 C-1.406000018119812,17.724000930786133 3.9839999675750732,9.343999862670898 3.9839999675750732,-0.006000000052154064 C3.9839999675750732,-9.345999717712402 -1.3960000276565552,-17.715999603271484 -9.675999641418457,-21.676000595092773 C-11.675999641418457,-22.625999450683594 -12.515999794006348,-25.016000747680664 -11.565999984741211,-27.006000518798828 C-10.616000175476074,-29.006000518798828 -8.22599983215332,-29.84600067138672 -6.236000061035156,-28.895999908447266z"></path></g></g></g></g></svg></span>
            <span class="svgBox sz" ref="settingIcon">
											<svg @mouseenter="mouseInBs(settingBox,settingIcon,55,600)" @mouseleave="mouseOutBs(settingBox)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" width="88" height="88" preserveAspectRatio="xMidYMid meet" style="transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_98"><rect width="88" height="88" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_98)"><g transform="matrix(1,0,0,1,44,43.875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M0,8.125 C-4.420000076293945,8.125 -8,4.545000076293945 -8,0.125 C-8,-4.295000076293945 -4.420000076293945,-7.875 0,-7.875 C4.420000076293945,-7.875 8,-4.295000076293945 8,0.125 C8,4.545000076293945 4.420000076293945,8.125 0,8.125z M0,16.125 C8.84000015258789,16.125 16,8.96500015258789 16,0.125 C16,-8.71500015258789 8.84000015258789,-15.875 0,-15.875 C-8.84000015258789,-15.875 -16,-8.71500015258789 -16,0.125 C-16,8.96500015258789 -8.84000015258789,16.125 0,16.125z M4.539999961853027,27.51099967956543 C3.059999942779541,27.750999450683594 1.5499999523162842,27.871000289916992 0,27.871000289916992 C-1.5499999523162842,27.871000289916992 -3.059999942779541,27.750999450683594 -4.539999961853027,27.51099967956543 C-4.539999961853027,27.51099967956543 -8.699999809265137,32.56100082397461 -8.699999809265137,32.56100082397461 C-9.9399995803833,34.07099914550781 -12.100000381469727,34.46099853515625 -13.789999961853027,33.48099899291992 C-13.789999961853027,33.48099899291992 -21.780000686645508,28.871000289916992 -21.780000686645508,28.871000289916992 C-23.469999313354492,27.891000747680664 -24.209999084472656,25.83099937438965 -23.520000457763672,24.000999450683594 C-23.520000457763672,24.000999450683594 -21.290000915527344,18.06100082397461 -21.290000915527344,18.06100082397461 C-23.3799991607666,15.621000289916992 -25.049999237060547,12.810999870300293 -26.209999084472656,9.76099967956543 C-26.209999084472656,9.76099967956543 -32.65999984741211,8.680999755859375 -32.65999984741211,8.680999755859375 C-34.59000015258789,8.361000061035156 -36,6.690999984741211 -36,4.741000175476074 C-36,4.741000175476074 -36,-4.488999843597412 -36,-4.488999843597412 C-36,-6.439000129699707 -34.59000015258789,-8.109000205993652 -32.65999984741211,-8.428999900817871 C-32.65999984741211,-8.428999900817871 -26.399999618530273,-9.479000091552734 -26.399999618530273,-9.479000091552734 C-25.309999465942383,-12.559000015258789 -23.690000534057617,-15.388999938964844 -21.65999984741211,-17.868999481201172 C-21.65999984741211,-17.868999481201172 -23.959999084472656,-23.999000549316406 -23.959999084472656,-23.999000549316406 C-24.639999389648438,-25.839000701904297 -23.899999618530273,-27.888999938964844 -22.209999084472656,-28.868999481201172 C-22.209999084472656,-28.868999481201172 -14.220000267028809,-33.479000091552734 -14.220000267028809,-33.479000091552734 C-12.529999732971191,-34.45899963378906 -10.380000114440918,-34.069000244140625 -9.130000114440918,-32.558998107910156 C-9.130000114440918,-32.558998107910156 -5.099999904632568,-27.659000396728516 -5.099999904632568,-27.659000396728516 C-3.450000047683716,-27.9689998626709 -1.7400000095367432,-28.128999710083008 0,-28.128999710083008 C1.7400000095367432,-28.128999710083008 3.450000047683716,-27.9689998626709 5.099999904632568,-27.659000396728516 C5.099999904632568,-27.659000396728516 9.130000114440918,-32.558998107910156 9.130000114440918,-32.558998107910156 C10.380000114440918,-34.069000244140625 12.529999732971191,-34.45899963378906 14.220000267028809,-33.479000091552734 C14.220000267028809,-33.479000091552734 22.209999084472656,-28.868999481201172 22.209999084472656,-28.868999481201172 C23.899999618530273,-27.888999938964844 24.639999389648438,-25.839000701904297 23.959999084472656,-23.999000549316406 C23.959999084472656,-23.999000549316406 21.65999984741211,-17.868999481201172 21.65999984741211,-17.868999481201172 C23.690000534057617,-15.388999938964844 25.309999465942383,-12.559000015258789 26.399999618530273,-9.479000091552734 C26.399999618530273,-9.479000091552734 32.65999984741211,-8.428999900817871 32.65999984741211,-8.428999900817871 C34.59000015258789,-8.109000205993652 36,-6.439000129699707 36,-4.488999843597412 C36,-4.488999843597412 36,4.741000175476074 36,4.741000175476074 C36,6.690999984741211 34.59000015258789,8.361000061035156 32.65999984741211,8.680999755859375 C32.65999984741211,8.680999755859375 26.209999084472656,9.76099967956543 26.209999084472656,9.76099967956543 C25.049999237060547,12.810999870300293 23.3799991607666,15.621000289916992 21.290000915527344,18.06100082397461 C21.290000915527344,18.06100082397461 23.520000457763672,24.000999450683594 23.520000457763672,24.000999450683594 C24.209999084472656,25.83099937438965 23.469999313354492,27.891000747680664 21.780000686645508,28.871000289916992 C21.780000686645508,28.871000289916992 13.789999961853027,33.48099899291992 13.789999961853027,33.48099899291992 C12.100000381469727,34.46099853515625 9.9399995803833,34.07099914550781 8.699999809265137,32.56100082397461 C8.699999809265137,32.56100082397461 4.539999961853027,27.51099967956543 4.539999961853027,27.51099967956543z"></path></g></g></g></svg>
											</span>
            <span class="svgBox hzh" @click="onHZH" ref="hzhIcon">
											<svg @mouseenter="mouseIn(tipHZH,hzhIcon,16,600)" @mouseleave="mouseOut(tipHZH,hzhIcon,16)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" width="88" height="88" preserveAspectRatio="xMidYMid meet" style="transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_103"><rect width="88" height="88" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_103)"><g transform="matrix(1,0,0,1,41,41)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M26,-28 C30.420000076293945,-28 34,-24.420000076293945 34,-20 C34,-20 34,4 34,4 C34,4 26,4 26,4 C26,4 26,-16.799999237060547 26,-16.799999237060547 C26,-18.56999969482422 24.56999969482422,-20 22.799999237060547,-20 C22.799999237060547,-20 -22.799999237060547,-20 -22.799999237060547,-20 C-24.510000228881836,-20 -25.899999618530273,-18.65999984741211 -25.989999771118164,-16.979999542236328 C-25.989999771118164,-16.979999542236328 -26,-16.799999237060547 -26,-16.799999237060547 C-26,-16.799999237060547 -26,16.799999237060547 -26,16.799999237060547 C-26,18.510000228881836 -24.65999984741211,19.899999618530273 -22.979999542236328,19.989999771118164 C-22.979999542236328,19.989999771118164 -22.799999237060547,20 -22.799999237060547,20 C-22.799999237060547,20 2,20 2,20 C2,20 2,28 2,28 C2,28 -26,28 -26,28 C-30.420000076293945,28 -34,24.420000076293945 -34,20 C-34,20 -34,-20 -34,-20 C-34,-24.420000076293945 -30.420000076293945,-28 -26,-28 C-26,-28 26,-28 26,-28z"></path></g></g><g transform="matrix(1,0,0,1,67,65)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M16,-8 C16,-8 16,8 16,8 C16,10.208999633789062 14.208999633789062,12 12,12 C12,12 -12,12 -12,12 C-14.208999633789062,12 -16,10.208999633789062 -16,8 C-16,8 -16,-8 -16,-8 C-16,-10.208999633789062 -14.208999633789062,-12 -12,-12 C-12,-12 12,-12 12,-12 C14.208999633789062,-12 16,-10.208999633789062 16,-8z"></path></g></g><g style="display: none;" transform="matrix(1,0,0,1,30.496000289916992,33.74300003051758)" opacity="0.00006400000024626706"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-4.038000106811523,-9.809000015258789 C-4.038000106811523,-9.809000015258789 2.2820000648498535,-3.499000072479248 2.2820000648498535,-3.499000072479248 C2.2820000648498535,-3.499000072479248 2.2820000648498535,-7.599999904632568 2.2820000648498535,-7.599999904632568 C2.2820000648498535,-8.65999984741211 3.0920000076293945,-9.520000457763672 4.131999969482422,-9.600000381469727 C4.131999969482422,-9.600000381469727 4.2820000648498535,-9.600000381469727 4.2820000648498535,-9.600000381469727 C4.2820000648498535,-9.600000381469727 8.281999588012695,-9.600000381469727 8.281999588012695,-9.600000381469727 C9.331999778747559,-9.600000381469727 10.192000389099121,-8.788999557495117 10.272000312805176,-7.749000072479248 C10.272000312805176,-7.749000072479248 10.281999588012695,-7.599999904632568 10.281999588012695,-7.599999904632568 C10.281999588012695,-7.599999904632568 10.281999588012695,8.399999618530273 10.281999588012695,8.399999618530273 C10.281999588012695,9.449999809265137 9.461999893188477,10.321000099182129 8.432000160217285,10.390999794006348 C8.432000160217285,10.390999794006348 8.281999588012695,10.399999618530273 8.281999588012695,10.399999618530273 C8.281999588012695,10.399999618530273 -7.7179999351501465,10.399999618530273 -7.7179999351501465,10.399999618530273 C-8.777999877929688,10.399999618530273 -9.637999534606934,9.581000328063965 -9.718000411987305,8.550999641418457 C-9.718000411987305,8.550999641418457 -9.718000411987305,8.399999618530273 -9.718000411987305,8.399999618530273 C-9.718000411987305,8.399999618530273 -9.718000411987305,4.400000095367432 -9.718000411987305,4.400000095367432 C-9.718000411987305,3.3399999141693115 -8.907999992370605,2.4800000190734863 -7.868000030517578,2.4000000953674316 C-7.868000030517578,2.4000000953674316 -7.7179999351501465,2.4000000953674316 -7.7179999351501465,2.4000000953674316 C-7.7179999351501465,2.4000000953674316 -3.138000011444092,2.4000000953674316 -3.138000011444092,2.4000000953674316 C-3.138000011444092,2.4000000953674316 -9.687999725341797,-4.159999847412109 -9.687999725341797,-4.159999847412109 C-10.477999687194824,-4.940000057220459 -10.477999687194824,-6.199999809265137 -9.687999725341797,-6.989999771118164 C-9.687999725341797,-6.989999771118164 -6.868000030517578,-9.809000015258789 -6.868000030517578,-9.809000015258789 C-6.078000068664551,-10.598999977111816 -4.817999839782715,-10.598999977111816 -4.038000106811523,-9.809000015258789z"></path></g></g></g></svg>
											</span>
            <span class="svgBox wyqp" @click="htmlFull()" :class="{None: fullC}" ref="wyqpIcon" >
											<svg @mouseenter="mouseIn(tipBodyQp,wyqpIcon,22,600)" @mouseleave="mouseOut(tipBodyQp,wyqpIcon,22)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" width="88" height="88" preserveAspectRatio="xMidYMid meet" style="transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_136"><rect width="88" height="88" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_136)"><g transform="matrix(1,0,0,1,44,44)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-14,-20 C-14,-20 -26,-20 -26,-20 C-27.049999237060547,-20 -27.920000076293945,-19.18000030517578 -27.989999771118164,-18.149999618530273 C-27.989999771118164,-18.149999618530273 -28,-18 -28,-18 C-28,-18 -28,-6 -28,-6 C-28,-4.949999809265137 -27.18000030517578,-4.079999923706055 -26.149999618530273,-4.010000228881836 C-26.149999618530273,-4.010000228881836 -26,-4 -26,-4 C-26,-4 -22,-4 -22,-4 C-20.950000762939453,-4 -20.079999923706055,-4.820000171661377 -20.010000228881836,-5.849999904632568 C-20.010000228881836,-5.849999904632568 -20,-6 -20,-6 C-20,-6 -20,-12 -20,-12 C-20,-12 -14,-12 -14,-12 C-12.949999809265137,-12 -12.079999923706055,-12.819999694824219 -12.010000228881836,-13.850000381469727 C-12.010000228881836,-13.850000381469727 -12,-14 -12,-14 C-12,-14 -12,-18 -12,-18 C-12,-19.049999237060547 -12.819999694824219,-19.920000076293945 -13.850000381469727,-19.989999771118164 C-13.850000381469727,-19.989999771118164 -14,-20 -14,-20z M26,-20 C26,-20 14,-20 14,-20 C12.949999809265137,-20 12.079999923706055,-19.18000030517578 12.010000228881836,-18.149999618530273 C12.010000228881836,-18.149999618530273 12,-18 12,-18 C12,-18 12,-14 12,-14 C12,-12.949999809265137 12.819999694824219,-12.079999923706055 13.850000381469727,-12.010000228881836 C13.850000381469727,-12.010000228881836 14,-12 14,-12 C14,-12 20,-12 20,-12 C20,-12 20,-6 20,-6 C20,-4.949999809265137 20.81999969482422,-4.079999923706055 21.850000381469727,-4.010000228881836 C21.850000381469727,-4.010000228881836 22,-4 22,-4 C22,-4 26,-4 26,-4 C27.049999237060547,-4 27.920000076293945,-4.820000171661377 27.989999771118164,-5.849999904632568 C27.989999771118164,-5.849999904632568 28,-6 28,-6 C28,-6 28,-18 28,-18 C28,-19.049999237060547 27.18000030517578,-19.920000076293945 26.149999618530273,-19.989999771118164 C26.149999618530273,-19.989999771118164 26,-20 26,-20z M-22,4 C-22,4 -26,4 -26,4 C-27.049999237060547,4 -27.920000076293945,4.820000171661377 -27.989999771118164,5.849999904632568 C-27.989999771118164,5.849999904632568 -28,6 -28,6 C-28,6 -28,18 -28,18 C-28,19.049999237060547 -27.18000030517578,19.920000076293945 -26.149999618530273,19.989999771118164 C-26.149999618530273,19.989999771118164 -26,20 -26,20 C-26,20 -14,20 -14,20 C-12.949999809265137,20 -12.079999923706055,19.18000030517578 -12.010000228881836,18.149999618530273 C-12.010000228881836,18.149999618530273 -12,18 -12,18 C-12,18 -12,14 -12,14 C-12,12.949999809265137 -12.819999694824219,12.079999923706055 -13.850000381469727,12.010000228881836 C-13.850000381469727,12.010000228881836 -14,12 -14,12 C-14,12 -20,12 -20,12 C-20,12 -20,6 -20,6 C-20,4.949999809265137 -20.81999969482422,4.079999923706055 -21.850000381469727,4.010000228881836 C-21.850000381469727,4.010000228881836 -22,4 -22,4z M26,4 C26,4 22,4 22,4 C20.950000762939453,4 20.079999923706055,4.820000171661377 20.010000228881836,5.849999904632568 C20.010000228881836,5.849999904632568 20,6 20,6 C20,6 20,12 20,12 C20,12 14,12 14,12 C12.949999809265137,12 12.079999923706055,12.819999694824219 12.010000228881836,13.850000381469727 C12.010000228881836,13.850000381469727 12,14 12,14 C12,14 12,18 12,18 C12,19.049999237060547 12.819999694824219,19.920000076293945 13.850000381469727,19.989999771118164 C13.850000381469727,19.989999771118164 14,20 14,20 C14,20 26,20 26,20 C27.049999237060547,20 27.920000076293945,19.18000030517578 27.989999771118164,18.149999618530273 C27.989999771118164,18.149999618530273 28,18 28,18 C28,18 28,6 28,6 C28,4.949999809265137 27.18000030517578,4.079999923706055 26.149999618530273,4.010000228881836 C26.149999618530273,4.010000228881836 26,4 26,4z M28,-28 C32.41999816894531,-28 36,-24.420000076293945 36,-20 C36,-20 36,20 36,20 C36,24.420000076293945 32.41999816894531,28 28,28 C28,28 -28,28 -28,28 C-32.41999816894531,28 -36,24.420000076293945 -36,20 C-36,20 -36,-20 -36,-20 C-36,-24.420000076293945 -32.41999816894531,-28 -28,-28 C-28,-28 28,-28 28,-28z"></path></g></g></g></svg></span>
            <span class="svgBox qp mar-r-15" @click="full()" >
											<svg @mouseenter="mouseIn3" @mouseleave="mouseOut3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" width="88" height="88" preserveAspectRatio="xMidYMid meet" style="transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_146"><rect width="88" height="88" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_146)"><g transform="matrix(1,0,0,1,44,74.22000122070312)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M19.219999313354492,0.2199999988079071 C7.480000019073486,7.630000114440918 -7.480000019073486,7.630000114440918 -19.219999313354492,0.2199999988079071 C-19.219999313354492,0.2199999988079071 -16.219999313354492,-5.78000020980835 -16.219999313354492,-5.78000020980835 C-6.389999866485596,0.75 6.409999847412109,0.75 16.239999771118164,-5.78000020980835 C16.239999771118164,-5.78000020980835 19.219999313354492,0.2199999988079071 19.219999313354492,0.2199999988079071z"></path></g></g><g transform="matrix(1,0,0,1,68.58000183105469,27.895000457763672)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M11.420000076293945,16.104999542236328 C11.420000076293945,16.104999542236328 4.78000020980835,16.104999542236328 4.78000020980835,16.104999542236328 C4.78000020980835,16.104999542236328 4.78000020980835,14.635000228881836 4.78000020980835,14.635000228881836 C4.25,4.054999828338623 -1.940000057220459,-5.425000190734863 -11.420000076293945,-10.164999961853027 C-11.420000076293945,-10.164999961853027 -8.479999542236328,-16.104999542236328 -8.479999542236328,-16.104999542236328 C3.7200000286102295,-10.005000114440918 11.420000076293945,2.4649999141693115 11.420000076293945,16.104999542236328 C11.420000076293945,16.104999542236328 11.420000076293945,16.104999542236328 11.420000076293945,16.104999542236328z"></path></g></g><g transform="matrix(1,0,0,1,19.450000762939453,27.895000457763672)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-4.809999942779541,16.104999542236328 C-4.809999942779541,16.104999542236328 -11.449999809265137,16.104999542236328 -11.449999809265137,16.104999542236328 C-11.449999809265137,2.4649999141693115 -3.75,-10.005000114440918 8.449999809265137,-16.104999542236328 C8.449999809265137,-16.104999542236328 11.449999809265137,-10.164999961853027 11.449999809265137,-10.164999961853027 C1.4900000095367432,-5.204999923706055 -4.809999942779541,4.974999904632568 -4.809999942779541,16.104999542236328 C-4.809999942779541,16.104999542236328 -4.809999942779541,16.104999542236328 -4.809999942779541,16.104999542236328z"></path></g></g><g transform="matrix(1,0,0,1,44.0099983215332,65.96499633789062)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-0.009999999776482582,5.34499979019165 C-5.46999979019165,5.355000019073486 -10.800000190734863,3.7149999141693115 -15.319999694824219,0.6549999713897705 C-15.319999694824219,0.6549999713897705 -12.319999694824219,-5.34499979019165 -12.319999694824219,-5.34499979019165 C-5,0.08500000089406967 5,0.08500000089406967 12.319999694824219,-5.34499979019165 C12.319999694824219,-5.34499979019165 15.319999694824219,0.6549999713897705 15.319999694824219,0.6549999713897705 C10.800000190734863,3.7249999046325684 5.460000038146973,5.355000019073486 -0.009999999776482582,5.34499979019165z"></path></g></g><g transform="matrix(1,0,0,1,62.275001525878906,31.780000686645508)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M9.015000343322754,10.850000381469727 C9.015000343322754,10.850000381469727 9.015000343322754,12.220000267028809 9.015000343322754,12.220000267028809 C9.015000343322754,12.220000267028809 2.434999942779541,12.220000267028809 2.434999942779541,12.220000267028809 C2.434999942779541,12.220000267028809 2.434999942779541,11.220000267028809 2.434999942779541,11.220000267028809 C2.075000047683716,3.740000009536743 -2.305000066757202,-2.9700000286102295 -9.015000343322754,-6.309999942779541 C-9.015000343322754,-6.309999942779541 -6.014999866485596,-12.220000267028809 -6.014999866485596,-12.220000267028809 C-6.014999866485596,-12.220000267028809 -6.014999866485596,-12.220000267028809 -6.014999866485596,-12.220000267028809 C2.7850000858306885,-7.800000190734863 8.524999618530273,1.0099999904632568 9.015000343322754,10.850000381469727 C9.015000343322754,10.850000381469727 9.015000343322754,10.850000381469727 9.015000343322754,10.850000381469727z"></path></g></g><g transform="matrix(1,0,0,1,25.729999542236328,31.780000686645508)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-2.440000057220459,12.220000267028809 C-2.440000057220459,12.220000267028809 -9.050000190734863,12.220000267028809 -9.050000190734863,12.220000267028809 C-9.050000190734863,1.8700000047683716 -3.2100000381469727,-7.590000152587891 6.050000190734863,-12.220000267028809 C6.050000190734863,-12.220000267028809 9.050000190734863,-6.309999942779541 9.050000190734863,-6.309999942779541 C2.0199999809265137,-2.809999942779541 -2.430000066757202,4.360000133514404 -2.440000057220459,12.220000267028809 C-2.440000057220459,12.220000267028809 -2.440000057220459,12.220000267028809 -2.440000057220459,12.220000267028809z"></path></g></g><g transform="matrix(1,0,0,1,44,57.654998779296875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M0,4.974999904632568 C-4.110000133514404,4.994999885559082 -8.119999885559082,3.6449999809265137 -11.380000114440918,1.1349999904632568 C-11.380000114440918,1.1349999904632568 -8.319999694824219,-4.974999904632568 -8.319999694824219,-4.974999904632568 C-3.6700000762939453,-0.5049999952316284 3.6700000762939453,-0.5049999952316284 8.319999694824219,-4.974999904632568 C8.319999694824219,-4.974999904632568 11.380000114440918,1.1349999904632568 11.380000114440918,1.1349999904632568 C8.109999656677246,3.634999990463257 4.110000133514404,4.985000133514404 0,4.974999904632568 C0,4.974999904632568 0,4.974999904632568 0,4.974999904632568z"></path></g></g><g transform="matrix(1,0,0,1,55.9900016784668,35.665000915527344)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M6.619999885559082,7.40500020980835 C6.619999885559082,7.40500020980835 6.619999885559082,8.335000038146973 6.619999885559082,8.335000038146973 C6.619999885559082,8.335000038146973 0.009999999776482582,8.335000038146973 0.009999999776482582,8.335000038146973 C0.009999999776482582,3.7850000858306885 -2.549999952316284,-0.375 -6.619999885559082,-2.4049999713897705 C-6.619999885559082,-2.4049999713897705 -3.619999885559082,-8.335000038146973 -3.619999885559082,-8.335000038146973 C2.380000114440918,-5.324999809265137 6.300000190734863,0.6949999928474426 6.619999885559082,7.40500020980835 C6.619999885559082,7.40500020980835 6.619999885559082,7.40500020980835 6.619999885559082,7.40500020980835z"></path></g></g><g transform="matrix(1,0,0,1,31.9950008392334,35.665000915527344)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M6.635000228881836,-2.4049999713897705 C2.565000057220459,-0.375 0.004999999888241291,3.7850000858306885 0.004999999888241291,8.335000038146973 C0.004999999888241291,8.335000038146973 -6.635000228881836,8.335000038146973 -6.635000228881836,8.335000038146973 C-6.635000228881836,1.274999976158142 -2.6449999809265137,-5.184999942779541 3.674999952316284,-8.335000038146973 C3.674999952316284,-8.335000038146973 6.635000228881836,-2.4049999713897705 6.635000228881836,-2.4049999713897705z"></path></g></g><g transform="matrix(1,0,0,1,44,66.322998046875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M8.319000244140625,-13.677000045776367 C8.319000244140625,-13.677000045776367 19.2189998626709,8.123000144958496 19.2189998626709,8.123000144958496 C13.659000396728516,11.642999649047852 7.068999767303467,13.67300033569336 -0.0010000000474974513,13.67300033569336 C-7.071000099182129,13.67300033569336 -13.66100025177002,11.642999649047852 -19.22100067138672,8.123000144958496 C-19.22100067138672,8.123000144958496 -8.321000099182129,-13.677000045776367 -8.321000099182129,-13.677000045776367 C-6.160999774932861,-11.597000122070312 -3.2309999465942383,-10.32699966430664 -0.0010000000474974513,-10.32699966430664 C3.2290000915527344,-10.32699966430664 6.169000148773193,-11.597000122070312 8.319000244140625,-13.677000045776367z"></path></g></g><g transform="matrix(1,0,0,1,64.68399810791016,27.89699935913086)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M15.314000129699707,16.10700035095215 C15.314000129699707,16.10700035095215 -8.685999870300293,16.10700035095215 -8.685999870300293,16.10700035095215 C-8.685999870300293,11.406999588012695 -11.38599967956543,7.336999893188477 -15.315999984741211,5.367000102996826 C-15.315999984741211,5.367000102996826 -4.576000213623047,-16.10300064086914 -4.576000213623047,-16.10300064086914 C7.214000225067139,-10.192999839782715 15.314000129699707,2.006999969482422 15.314000129699707,16.10700035095215z"></path></g></g><g transform="matrix(1,0,0,1,23.31599998474121,27.89699935913086)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M4.584000110626221,-16.10300064086914 C4.584000110626221,-16.10300064086914 15.314000129699707,5.367000102996826 15.314000129699707,5.367000102996826 C11.383999824523926,7.336999893188477 8.684000015258789,11.406999588012695 8.684000015258789,16.10700035095215 C8.684000015258789,16.10700035095215 -15.315999984741211,16.10700035095215 -15.315999984741211,16.10700035095215 C-15.315999984741211,2.006999969482422 -7.216000080108643,-10.192999839782715 4.584000110626221,-16.10300064086914z"></path></g></g><g transform="matrix(1,0,0,1,44,44)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M0,-4 C2.140000104904175,-4 3.890000104904175,-2.319999933242798 4,-0.20000000298023224 C4,-0.20000000298023224 4,0 4,0 C4,0 4,0.20000000298023224 4,0.20000000298023224 C3.890000104904175,2.319999933242798 2.140000104904175,4 0,4 C-2.2100000381469727,4 -4,2.2100000381469727 -4,0 C-4,-2.2100000381469727 -2.2100000381469727,-4 0,-4z"></path></g></g></g></svg>
											</span>
          </div>
        </div>
      </div>
      <div class="videoButtonMask" ref="videoMask"></div>
      <!--    时间指针数字-->
      <div class="timeBox" ref="timeBoxC" :class="{None: !isYes}">
        <span class="fontHt" v-text="nextTime" ></span>
      </div>
<!--      tip-->
      <span class="fontHt tipFont" ref="tipBodyQp">网页全屏</span>
      <span class="fontHt tipFont" ref="tipHZH">画中画</span>
      <span class="fontHt tipFont inQp" ref="tipQp" v-text="tipQpF"></span>
<!--      这播放器真的是事多。。艹！-->
      <div class="volumeBox" ref="volumeController" @mouseenter="IconMove(volumeController,volumeIcon,5)" @mouseleave="IconMoveOut(volumeController)">
        <div class="numBox" ref="volumeOne">
          <span class="fontHt vol" v-text="volumeNum" ></span>
        </div>
        <div class="volLineBox">
          <div class="volumeOne" @click="volClick" >
            <div  class="lineWaiKe">
              <div class="volumeLine" ref="volumeHeight"></div>
              <div class="volumeButton" ref="volumeButton" @mousedown="slider"></div>
            </div>
          </div>
        </div>
      </div>
<!--      bs-->
      <div class="bsBox" ref="bsBox" @mouseenter="IconMove(bsBox,bsIcon,15)" @mouseleave="IconMoveOut(bsBox)">
        <div class="bsBoxS">
          <span class="fontHt"  @click="bsClick(2,bsBox)">2x</span>
          <span class="fontHt"  @click="bsClick(1.5,bsBox)">1.5x</span>
          <span class="fontHt"  @click="bsClick(1,bsBox)">1x</span>
          <span class="fontHt"  @click="bsClick(0.5,bsBox)">0.5x</span>
        </div>
      </div>
<!--      setting-->
      <div class="settingBox" ref="settingBox" @mouseenter="IconMove(settingBox,settingIcon,55)" @mouseleave="IconMoveOut(settingBox)">
        <div class="settingOne">
          <span class="fontHt">镜像画面</span>
          <div type="button" :class="{switch:true,switchs:flagH}" @click="settingClick('flagH')"></div>
        </div>
        <div class="settingOne">
          <span class="fontHt">播完重播</span>
          <div type="button" :class="{switch:true,switchs:flagL}" @click="settingClick('flagL')"></div>
        </div>
        <div class="settingOne">
          <span class="fontHt">自动播放</span>
          <div type="button" :class="{switch:true,switchs:flagA}" @click="settingClick('flagA')"></div>
        </div>
        <div class="settingOne">
          <span class="fontHt">更多播放设置 ></span>
        </div>
      </div>
      <div class="svgPlayer" ref="svgPlayer">
        <svg viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
            <polygon id="cd9e036b-17ed-4fb1-988d-92dd0e62df02" points="0 0 80 0 80 80 0 80"></polygon>
            <path id="e9029cf2-058b-4dc3-a369-191aaec4988d" d="M52.5463795,8.01403034 C54.5470371,7.84763808 56.3253994,9.18911826 56.7676959,11.0911381 C56.8718466,11.5365362 56.8612939,11.8985083 56.8069245,12.2287648 C56.7500316,12.556723 56.6424397,12.8481393 56.4951605,13.110368 C56.4219797,13.2418271 56.3354933,13.3636336 56.2494657,13.4856699 L56.2494657,13.4856699 L55.9916124,13.8522385 L55.4708587,14.5816985 C54.7716265,15.5508645 54.0556475,16.50762 53.3171867,17.4480581 C53.3121398,17.4544931 53.3068634,17.4606984 53.3020459,17.4671334 C54.2015503,17.5075824 55.1010548,17.5517085 56.0005592,17.6022697 C57.096436,17.6624835 58.1918539,17.7339586 59.2877307,17.8093407 L59.2877307,17.8093407 L60.9309723,17.9320665 L61.7527078,17.9980259 L62.1635756,18.0324994 L62.3688948,18.0495064 L62.471669,18.0580098 L62.5872901,18.0699607 C63.8533868,18.1864812 65.1027368,18.520185 66.2644533,19.0451021 C67.4263993,19.5697893 68.5000236,20.2872985 69.4304979,21.1587894 C70.3609723,22.0295909 71.1487556,23.0543742 71.7511781,24.1807396 C72.3552065,25.3059558 72.7702036,26.5343627 72.9750639,27.7944854 C73.0051162,27.9514549 73.0214041,28.1100331 73.0429684,28.2681518 L73.0429684,28.2681518 L73.0581092,28.3867407 L73.0714148,28.4988946 L73.0927497,28.7045867 L73.178089,29.5271253 L73.3366092,31.1733515 C73.4377777,32.2714485 73.5267875,33.3709245 73.6061623,34.4713197 C73.9220556,38.8708323 74.0704819,43.2995325 73.9677076,47.7257047 C73.8695214,52.1475102 73.5717513,56.5518491 73.123949,60.9389512 C73.1124787,61.0662734 73.0904556,61.2356534 73.070956,61.3930826 C73.0530623,61.5521205 73.0269099,61.7104689 72.9989223,61.8683577 L72.9583172,62.1053058 L72.9083065,62.3406451 C72.8745837,62.4976146 72.8410903,62.6543543 72.7979618,62.8092554 C72.638524,63.4309282 72.4281579,64.0401904 72.1691575,64.6280791 C71.6523038,65.8043162 70.9393071,66.8927606 70.0700844,67.8368758 C69.2020087,68.7819103 68.1783951,69.5837648 67.0510896,70.1990025 C65.9240135,70.8153893 64.6934749,71.2433208 63.4282958,71.4609637 C63.2697757,71.485325 63.1117143,71.5129038 62.9525059,71.5331283 L62.9525059,71.5331283 L62.4762572,71.5859877 L61.6545217,71.6574628 L60.0108212,71.7907605 C58.9151739,71.8769444 57.8190677,71.9509475 56.723191,72.0210437 C54.5309786,72.1573291 52.3383075,72.2648865 50.1451775,72.3455546 C41.3733459,72.6696058 32.5989908,72.5652659 23.8315179,72.0442559 C22.7356412,71.9799053 21.6402232,71.9031442 20.5445759,71.8238551 L20.5445759,71.8238551 L18.9015636,71.6951539 L18.0802869,71.6264367 L17.6696486,71.5910438 L17.4643294,71.5731176 C17.3957368,71.5671422 17.3305852,71.5620861 17.2461635,71.5522036 C15.9706611,71.433155 14.7132819,71.091867 13.5460596,70.5609746 C12.3779196,70.0296225 11.3006248,69.3040695 10.368774,68.4252242 C9.4371526,67.5466086 8.64822227,66.5163096 8.04901145,65.3832794 C7.4486536,64.2513983 7.03686821,63.0188545 6.83407251,61.7557442 C6.80952597,61.5978554 6.78268537,61.4401964 6.7670857,61.2811585 L6.7670857,61.2811585 L6.7407039,61.0428314 L6.72762771,60.9240127 L6.71868084,60.8210517 L6.6475647,59.9978237 L6.51565574,58.3504483 C6.43283985,57.2518916 6.35942964,56.1524157 6.29565452,55.0522503 C6.03986583,50.6529675 5.93755035,46.2348392 6.03825998,41.8194687 C6.13667554,37.4068562 6.41012856,33.0075734 6.82604327,28.6223099 C6.94441723,27.3608083 7.26696333,26.1147049 7.78312886,24.9545555 C8.29814735,23.7937167 9.0047206,22.7195213 9.86476706,21.7871271 C10.7243547,20.8542732 11.7390214,20.0655187 12.8543978,19.4603933 C13.9695447,18.8548081 15.1865483,18.43561 16.4368159,18.2241723 C16.5935008,18.2007303 16.7494975,18.1726918 16.9068707,18.1540761 L16.9068707,18.1540761 L17.3762372,18.1030552 L18.1975139,18.0336485 L19.8398379,17.9037982 C20.9350264,17.8199126 22.0302149,17.7482077 23.1254035,17.6801799 C24.2455974,17.6123819 25.3662501,17.552398 26.4866734,17.4993087 C26.4731384,17.4823018 26.459374,17.465065 26.4458389,17.4480581 C25.7073781,16.50762 24.9911698,15.5508645 24.2919376,14.5816985 L24.2919376,14.5816985 L23.7714133,13.8522385 L23.51356,13.4856699 C23.4275324,13.3636336 23.3408166,13.2418271 23.2678652,13.110368 C23.1203565,12.8481393 23.0129941,12.556723 22.9558718,12.2287648 C22.9017318,11.8985083 22.8909496,11.5365362 22.9953298,11.0911381 C23.4527671,9.13281148 25.2740285,7.85039596 27.2166461,8.01403034 C27.6717894,8.05195123 28.0122293,8.1735279 28.3093112,8.32682022 C28.6031814,8.48195113 28.8468116,8.67408363 29.0507543,8.89540373 C29.1530698,9.00548922 29.2418502,9.12568695 29.3313189,9.24519521 L29.3313189,9.24519521 L29.6001838,9.60371998 L30.1328666,10.3244467 C30.8380634,11.289246 31.5265136,12.266226 32.1922524,13.2595235 C32.8575324,14.2532806 33.5042304,15.2605973 34.1217938,16.2890578 C34.3094487,16.6025372 34.4950388,16.9178551 34.6778761,17.2350116 C37.4016243,17.1878978 40.125143,17.1791645 42.8488911,17.1968609 C43.5962988,17.2026065 44.3441653,17.2120293 45.0918023,17.2232906 C45.2723456,16.9100411 45.4558711,16.59886 45.6410025,16.2890578 C46.2587952,15.2605973 46.9054933,14.2532806 47.5707733,13.2595235 C48.2367415,12.266226 48.9249622,11.289246 49.6299296,10.3244467 L49.6299296,10.3244467 L50.1626124,9.60371998 L50.4314773,9.24519521 C50.5211754,9.12568695 50.6099559,9.00548922 50.7122714,8.89540373 C50.9162141,8.67408363 51.1596148,8.48195113 51.4537145,8.32682022 C51.7507964,8.1735279 52.0912362,8.05195123 52.5463795,8.01403034 Z M30.1292787,34.6305448 C29.9027436,35.0737419 29.7609153,35.5553261 29.7110787,36.0505615 C29.4138374,39.0042999 29.2652168,42.0471726 29.2652168,45.1791797 C29.2652168,48.0068864 29.3863609,50.8345931 29.6286492,53.6622998 L29.7399083,54.8741737 C29.9552063,57.072794 31.9120739,58.6805944 34.1106942,58.4652963 C34.6308013,58.4143652 35.1358879,58.2620098 35.597405,58.0168417 C38.4166275,56.5192079 41.1473744,54.9840008 43.7896457,53.4112203 C45.7989419,52.2152106 47.7645435,50.9930278 49.6864507,49.7446716 L51.1196851,48.8034922 C52.9601471,47.5816163 53.4616102,45.0991009 52.2397342,43.2586389 C51.9555036,42.830514 51.5914399,42.4611683 51.1674532,42.1708009 C48.8122631,40.5578484 46.3529939,38.9884709 43.7896457,37.4626684 C41.5302725,36.1178034 39.2374735,34.835025 36.9112487,33.6143333 L35.5115044,32.8893654 C33.5444304,31.8839182 31.1347259,32.6634708 30.1292787,34.6305448 Z"></path>
            <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" id="0bb3e1ae-f6c9-4254-a22a-e753c086e5a8">
              <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
              <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
              <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
              <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
              <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
              <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
              <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
              </feMerge>
            </filter>
          </defs>
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.8">
            <mask id="ab6af442-0ec0-4fa1-b1e0-53d5102b9d3a" fill="white">
              <use xlink:href="#cd9e036b-17ed-4fb1-988d-92dd0e62df02"></use>
            </mask>
            <g mask="url(#ab6af442-0ec0-4fa1-b1e0-53d5102b9d3a)">
              <use fill="black" fill-opacity="1" filter="url(#0bb3e1ae-f6c9-4254-a22a-e753c086e5a8)" xlink:href="#e9029cf2-058b-4dc3-a369-191aaec4988d"></use>
              <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#e9029cf2-058b-4dc3-a369-191aaec4988d"></use>
            </g>
          </g>
        </svg>
      </div>
<!--      -->
      <div class="loadingBox" v-if="loadTip">
        <div class="fontHt loadingTip" v-if="videoLoad"><video-tip>开始加载视频...</video-tip></div>
        <div class="fontHt loadingTip width-92" v-if="videoWait"><video-tip>视频缓冲中...</video-tip></div>
        <div class="fontHt loadingTip width-92" v-if="videoOk"><video-tip>视频加载成功!</video-tip></div>
        <div class="fontHt loadingTip width-110" v-if="videoError"><video-tip>视频加载错误！请点击下方反馈</video-tip></div>
        <div class="fontHt loadingTip width-110" v-if="hlsError"><video-tip>视频加载错误！请点击下方反馈</video-tip></div>
      </div>
<!--      -->
      <div class="loadIng" v-show="loadTv">
        <div class="loadOne"></div>
      </div>
    </div>
    <!-- 弹幕条 -->
    <div class="dmBox p-r">
      <div class="start-my">
        <span class="span-ys2"><span class="span-ys">{{lookNumSpan}}</span>人正在看,<span class="span-ys">0</span>条弹幕装载</span>

      </div>
      <div class="dmk">
        <div class="dmSetting">
          <div class="dm-controller-box" >
            <svg width="30.000000" height="30.000000" viewBox="0 0 30 30" fill="none"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
              <rect width="30.000000" height="30.000000" fill="#ffffff" />
              <rect width="30.000000" height="30.000000" fill="#FFFFFF" />
              <g clip-path="url(#clip2_3)">
                <path d="M23.96 3.72L20.96 7.72L19.04 6.28L22.04 2.28C22.4432 1.7424 23.1824 1.63681 23.72 2.04001C24.2576 2.44321 24.3632 3.1824 23.96 3.72Z" fill-rule="evenodd" fill="#878787"/>
                <path d="M9.96 2.28L12.96 6.28L11.04 7.72L8.04 3.72C7.6368 3.1824 7.7424 2.44321 8.28 2.04001C8.8176 1.63681 9.5568 1.7424 9.96 2.28Z" fill-rule="evenodd" fill="#878787"/>
                <path d="M20.6016 19.3047Q20.4492 19.1367 20.1914 19.1367L17.7617 19.1367L17.7617 17.9023L19.4883 17.9023Q19.9023 17.9023 20.1992 17.6016Q20.4961 17.2969 20.4961 16.8789L20.4961 11.6641Q20.4961 11.2461 20.1992 10.9531Q19.9023 10.6562 19.4883 10.6562L18.9297 10.6562L19.375 9.64844Q19.4727 9.42578 19.3828 9.20312Q19.2969 8.97656 19.0703 8.86328Q18.8477 8.76953 18.6133 8.85938Q18.3828 8.94531 18.2891 9.16797L17.6016 10.6719L16.5273 10.6719L15.7266 9.15234Q15.6016 8.92969 15.3672 8.85938Q15.1367 8.78516 14.9297 8.89453Q14.7031 9.02344 14.6289 9.25781Q14.5586 9.48828 14.6719 9.69531L15.168 10.6562L14.7539 10.6562Q14.3359 10.6562 14.0391 10.9531Q13.7422 11.2461 13.7422 11.6641L13.7422 16.8789Q13.7422 17.3125 14.0391 17.6094Q14.3359 17.9023 14.7539 17.9023L16.4648 17.9023L16.4648 19.1211L14.1133 19.1211Q13.8555 19.1211 13.6719 19.2969Q13.4883 19.4727 13.4883 19.7266Q13.4883 19.9844 13.6719 20.168Q13.8555 20.3516 14.1133 20.3516L16.4648 20.3516L16.4648 23.3594Q16.4648 23.6172 16.6484 23.8008Q16.832 23.9844 17.0898 23.9844Q17.3438 23.9844 17.5273 23.8008Q17.7109 23.6172 17.7109 23.3594L17.7109 20.3516L20.1445 20.3516Q20.3828 20.3516 20.5664 20.168Q20.7539 19.9844 20.7539 19.7266Q20.7539 19.4727 20.6016 19.3047ZM11.0156 22.4805Q10.8164 22.5273 10.625 22.5273L10.1445 22.5273Q9.88672 22.5273 9.70312 22.7109Q9.51953 22.8945 9.51953 23.1523Q9.51953 23.4062 9.70312 23.582Q9.88672 23.7617 10.1445 23.7617L10.625 23.7617Q12.8789 23.7617 13.0078 20.832L13.1211 18.0312Q13.1523 17.6172 12.8477 17.3125Q12.5742 17.0234 12.1602 17.0234L10.6719 17.0234L11.0078 14.5586L12.4336 14.5586Q12.6875 14.5586 12.8633 14.3828Q13.0898 14.207 13.0898 13.9375L13.1836 10.0977Q13.1836 9.96875 13.1445 9.84766Q13.1055 9.72656 13.0234 9.64844Q12.8164 9.47266 12.5938 9.47266L10.207 9.47266Q9.95312 9.47266 9.76953 9.64844Q9.58594 9.82422 9.58594 10.0781Q9.58594 10.3359 9.76953 10.5195Q9.95312 10.7031 10.207 10.7031L11.9531 10.7031L11.8867 13.3281L10.4805 13.3281Q10.2578 13.3281 10.0898 13.4727Q9.92188 13.6172 9.88672 13.8398L9.85547 13.9531L9.35938 17.5508Q9.32812 17.8398 9.50391 18.0312Q9.69531 18.2578 9.96875 18.2578L11.8867 18.2578L11.7773 20.7852Q11.7422 21.3906 11.6367 21.7344Q11.5352 22.0781 11.375 22.2539Q11.2148 22.4336 11.0156 22.4805ZM14.9609 13.6484L14.9609 11.8398L16.5273 11.8398L16.5273 13.6484L14.9609 13.6484ZM17.7422 11.8398L19.3281 11.8398L19.3281 13.6484L17.7422 13.6484L17.7422 11.8398ZM16.5273 14.8789L16.5273 16.7188L14.9609 16.7188L14.9609 14.8789L16.5273 14.8789ZM19.3281 14.8789L19.3281 16.7188L17.7422 16.7188L17.7422 14.8789L19.3281 14.8789Z" fill="#979797FF"/>
                <rect x="3.799999" y="6.799988" rx="3" width="23.400000" height="18.400000" stroke="#878787" stroke-width="2.400000"/>
                <ellipse cx="24.500000" cy="24.000000" rx="9.500000" ry="9.000000" fill="#FFFFFF"/>
                <circle cx="22.500000" cy="21.500000" r="4.500000" fill="#FFFFFF"/>
                <circle cx="22.500000" cy="21.500000" r="4.500000" stroke="#979797" stroke-width="2.000000"/>
                <line x1="18.000000" y1="18.000000" x2="25.000000" y2="23.000000" stroke="#979797" stroke-width="2.000000"/>
              </g>
              <defs>
                <clipPath id="clip2_3">
                  <rect width="30.000000" height="30.000000" fill="white"/>
                </clipPath>
              </defs>
            </svg>
          </div>
          <div class="dm-controller-box">
            <svg width="30.000000" height="30.000000" viewBox="0 0 30 30" fill="none"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
              <rect width="30.000000" height="30.000000" fill="#ffffff"/>
              <rect width="30.000000" height="30.000000" fill="#FFFFFF"/>
              <g clip-path="url(#clip2_3)">
                <path d="M23.96 3.72L20.96 7.72L19.04 6.28L22.04 2.28C22.4432 1.7424 23.1824 1.63681 23.72 2.04001C24.2576 2.44321 24.3632 3.1824 23.96 3.72Z" fill-rule="evenodd" fill="#878787"/>
                <path d="M9.96 2.28L12.96 6.28L11.04 7.72L8.04 3.72C7.6368 3.1824 7.7424 2.44321 8.28 2.04001C8.8176 1.63681 9.5568 1.7424 9.96 2.28Z" fill-rule="evenodd" fill="#878787"/>
                <path d="M20.6016 19.3047Q20.4492 19.1367 20.1914 19.1367L17.7617 19.1367L17.7617 17.9023L19.4883 17.9023Q19.9023 17.9023 20.1992 17.6016Q20.4961 17.2969 20.4961 16.8789L20.4961 11.6641Q20.4961 11.2461 20.1992 10.9531Q19.9023 10.6562 19.4883 10.6562L18.9297 10.6562L19.375 9.64844Q19.4727 9.42578 19.3828 9.20312Q19.2969 8.97656 19.0703 8.86328Q18.8477 8.76953 18.6133 8.85938Q18.3828 8.94531 18.2891 9.16797L17.6016 10.6719L16.5273 10.6719L15.7266 9.15234Q15.6016 8.92969 15.3672 8.85938Q15.1367 8.78516 14.9297 8.89453Q14.7031 9.02344 14.6289 9.25781Q14.5586 9.48828 14.6719 9.69531L15.168 10.6562L14.7539 10.6562Q14.3359 10.6562 14.0391 10.9531Q13.7422 11.2461 13.7422 11.6641L13.7422 16.8789Q13.7422 17.3125 14.0391 17.6094Q14.3359 17.9023 14.7539 17.9023L16.4648 17.9023L16.4648 19.1211L14.1133 19.1211Q13.8555 19.1211 13.6719 19.2969Q13.4883 19.4727 13.4883 19.7266Q13.4883 19.9844 13.6719 20.168Q13.8555 20.3516 14.1133 20.3516L16.4648 20.3516L16.4648 23.3594Q16.4648 23.6172 16.6484 23.8008Q16.832 23.9844 17.0898 23.9844Q17.3438 23.9844 17.5273 23.8008Q17.7109 23.6172 17.7109 23.3594L17.7109 20.3516L20.1445 20.3516Q20.3828 20.3516 20.5664 20.168Q20.7539 19.9844 20.7539 19.7266Q20.7539 19.4727 20.6016 19.3047ZM11.0156 22.4805Q10.8164 22.5273 10.625 22.5273L10.1445 22.5273Q9.88672 22.5273 9.70312 22.7109Q9.51953 22.8945 9.51953 23.1523Q9.51953 23.4062 9.70312 23.582Q9.88672 23.7617 10.1445 23.7617L10.625 23.7617Q12.8789 23.7617 13.0078 20.832L13.1211 18.0312Q13.1523 17.6172 12.8477 17.3125Q12.5742 17.0234 12.1602 17.0234L10.6719 17.0234L11.0078 14.5586L12.4336 14.5586Q12.6875 14.5586 12.8633 14.3828Q13.0898 14.207 13.0898 13.9375L13.1836 10.0977Q13.1836 9.96875 13.1445 9.84766Q13.1055 9.72656 13.0234 9.64844Q12.8164 9.47266 12.5938 9.47266L10.207 9.47266Q9.95312 9.47266 9.76953 9.64844Q9.58594 9.82422 9.58594 10.0781Q9.58594 10.3359 9.76953 10.5195Q9.95312 10.7031 10.207 10.7031L11.9531 10.7031L11.8867 13.3281L10.4805 13.3281Q10.2578 13.3281 10.0898 13.4727Q9.92188 13.6172 9.88672 13.8398L9.85547 13.9531L9.35938 17.5508Q9.32812 17.8398 9.50391 18.0312Q9.69531 18.2578 9.96875 18.2578L11.8867 18.2578L11.7773 20.7852Q11.7422 21.3906 11.6367 21.7344Q11.5352 22.0781 11.375 22.2539Q11.2148 22.4336 11.0156 22.4805ZM14.9609 13.6484L14.9609 11.8398L16.5273 11.8398L16.5273 13.6484L14.9609 13.6484ZM17.7422 11.8398L19.3281 11.8398L19.3281 13.6484L17.7422 13.6484L17.7422 11.8398ZM16.5273 14.8789L16.5273 16.7188L14.9609 16.7188L14.9609 14.8789L16.5273 14.8789ZM19.3281 14.8789L19.3281 16.7188L17.7422 16.7188L17.7422 14.8789L19.3281 14.8789Z" fill="#979797FF"/>
                <rect x="3.799999" y="6.799988" rx="3" width="23.400000" height="18.400000" stroke="#878787" stroke-width="2.400000"/>
                <ellipse cx="22.000000" cy="25.500000" rx="8.000000" ry="4.500000" fill="#FFFFFF"/>
                <ellipse cx="28.000000" cy="18.000000" rx="3.000000" ry="6.000000" fill="#FFFFFF"/>
                <path d="M17 23L22.5 26L28 16" stroke="#6DBCFF" stroke-width="2.400000" stroke-linejoin="round" stroke-linecap="round"/>
              </g>
              <defs>
                <clipPath id="clip2_3">
                  <rect width="30.000000" height="30.000000" fill="white"/>
                </clipPath>
              </defs>
            </svg>
          </div>
          <div class="dm-controller-box">
            <svg width="30.000000" height="30.000000" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <rect width="30.000000" height="30.000000" fill="#ffffff"/>
              <rect width="30.000000" height="30.000000" fill="#FFFFFF"/>
              <g clip-path="url(#clip2_3)">
                <path d="M23.96 3.72L20.96 7.72L19.04 6.28L22.04 2.28C22.4432 1.7424 23.1824 1.63681 23.72 2.04001C24.2576 2.44321 24.3632 3.1824 23.96 3.72Z" fill-rule="evenodd" fill="#878787"/>
                <path d="M9.96 2.28L12.96 6.28L11.04 7.72L8.04 3.72C7.6368 3.1824 7.7424 2.44321 8.28 2.04001C8.8176 1.63681 9.5568 1.7424 9.96 2.28Z" fill-rule="evenodd" fill="#878787"/>
                <path d="M20.6016 19.3047Q20.4492 19.1367 20.1914 19.1367L17.7617 19.1367L17.7617 17.9023L19.4883 17.9023Q19.9023 17.9023 20.1992 17.6016Q20.4961 17.2969 20.4961 16.8789L20.4961 11.6641Q20.4961 11.2461 20.1992 10.9531Q19.9023 10.6562 19.4883 10.6562L18.9297 10.6562L19.375 9.64844Q19.4727 9.42578 19.3828 9.20312Q19.2969 8.97656 19.0703 8.86328Q18.8477 8.76953 18.6133 8.85938Q18.3828 8.94531 18.2891 9.16797L17.6016 10.6719L16.5273 10.6719L15.7266 9.15234Q15.6016 8.92969 15.3672 8.85938Q15.1367 8.78516 14.9297 8.89453Q14.7031 9.02344 14.6289 9.25781Q14.5586 9.48828 14.6719 9.69531L15.168 10.6562L14.7539 10.6562Q14.3359 10.6562 14.0391 10.9531Q13.7422 11.2461 13.7422 11.6641L13.7422 16.8789Q13.7422 17.3125 14.0391 17.6094Q14.3359 17.9023 14.7539 17.9023L16.4648 17.9023L16.4648 19.1211L14.1133 19.1211Q13.8555 19.1211 13.6719 19.2969Q13.4883 19.4727 13.4883 19.7266Q13.4883 19.9844 13.6719 20.168Q13.8555 20.3516 14.1133 20.3516L16.4648 20.3516L16.4648 23.3594Q16.4648 23.6172 16.6484 23.8008Q16.832 23.9844 17.0898 23.9844Q17.3438 23.9844 17.5273 23.8008Q17.7109 23.6172 17.7109 23.3594L17.7109 20.3516L20.1445 20.3516Q20.3828 20.3516 20.5664 20.168Q20.7539 19.9844 20.7539 19.7266Q20.7539 19.4727 20.6016 19.3047ZM11.0156 22.4805Q10.8164 22.5273 10.625 22.5273L10.1445 22.5273Q9.88672 22.5273 9.70312 22.7109Q9.51953 22.8945 9.51953 23.1523Q9.51953 23.4062 9.70312 23.582Q9.88672 23.7617 10.1445 23.7617L10.625 23.7617Q12.8789 23.7617 13.0078 20.832L13.1211 18.0312Q13.1523 17.6172 12.8477 17.3125Q12.5742 17.0234 12.1602 17.0234L10.6719 17.0234L11.0078 14.5586L12.4336 14.5586Q12.6875 14.5586 12.8633 14.3828Q13.0898 14.207 13.0898 13.9375L13.1836 10.0977Q13.1836 9.96875 13.1445 9.84766Q13.1055 9.72656 13.0234 9.64844Q12.8164 9.47266 12.5938 9.47266L10.207 9.47266Q9.95312 9.47266 9.76953 9.64844Q9.58594 9.82422 9.58594 10.0781Q9.58594 10.3359 9.76953 10.5195Q9.95312 10.7031 10.207 10.7031L11.9531 10.7031L11.8867 13.3281L10.4805 13.3281Q10.2578 13.3281 10.0898 13.4727Q9.92188 13.6172 9.88672 13.8398L9.85547 13.9531L9.35938 17.5508Q9.32812 17.8398 9.50391 18.0312Q9.69531 18.2578 9.96875 18.2578L11.8867 18.2578L11.7773 20.7852Q11.7422 21.3906 11.6367 21.7344Q11.5352 22.0781 11.375 22.2539Q11.2148 22.4336 11.0156 22.4805ZM14.9609 13.6484L14.9609 11.8398L16.5273 11.8398L16.5273 13.6484L14.9609 13.6484ZM17.7422 11.8398L19.3281 11.8398L19.3281 13.6484L17.7422 13.6484L17.7422 11.8398ZM16.5273 14.8789L16.5273 16.7188L14.9609 16.7188L14.9609 14.8789L16.5273 14.8789ZM19.3281 14.8789L19.3281 16.7188L17.7422 16.7188L17.7422 14.8789L19.3281 14.8789Z" fill="#979797FF"/>
                <rect x="3.799999" y="6.799988" rx="3" width="23.400000" height="18.400000" stroke="#878787" stroke-width="2.400000"/>
                <ellipse cx="23.000000" cy="22.500000" rx="8.000000" ry="7.500000" fill="#FFFFFF"/>
                <path d="M25.25 17L28 21.5L25.25 26L19.75 26L17 21.5L19.75 17L25.25 17Z" stroke="#878787" stroke-width="2.000000" stroke-linejoin="round"/>
                <circle cx="22.700001" cy="21.500000" r="1.500000" fill="#878787"/>
              </g>
              <defs>
                <clipPath id="clip2_3">
                  <rect width="30.000000" height="30.000000" fill="white"/>
                </clipPath>
              </defs>
            </svg>
          </div>
        </div>
        <div class="srk">
          <div class="fontSetting">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fonts" viewBox="0 0 16 16">
              <path d="M12.258 3h-8.51l-.083 2.46h.479c.26-1.544.758-1.783 2.693-1.845l.424-.013v7.827c0 .663-.144.82-1.3.923v.52h4.082v-.52c-1.162-.103-1.306-.26-1.306-.923V3.602l.431.013c1.934.062 2.434.301 2.693 1.846h.479L12.258 3z"/>
            </svg>
          </div>
          <input type="text" name="dmk" id="dmk" value="" placeholder="弹幕暂未实现"/>
        </div>
        <div class="commentDmUp">
          <button type="button"><span class="fontHt">发送</span></button>
        </div>
      </div>
    </div><!-- /.container-fluid -->

  </div>
</template>

<script setup>

import {onBeforeUnmount, onMounted, ref, computed, watch} from 'vue'
import {useStore} from 'vuex'
import Hls from 'hls.js'
import VideoTip from "@/components/videoTip";
import API from "@/api/AxiosConfig";
import {useRoute} from "vue-router";
import {useCookies} from "@vueuse/integrations/useCookies";

const route = useRoute()
const cookie = useCookies()
const lookNumSpan = ref(0)
const cs =ref(0)
const videoPlayerWH = ref(null)
const videoMy = ref(null) //视频元素
const videoMy2 = ref(null) //视频元素
const bf = ref(null)
const pause = ref(null)
const startTime = ref('0:0:0')  //视频开始时间
const endTime = ref(null)
const timeNew = ref(null)  //
const timeNew2 = ref(null)  //底部进度条
const timeNew2W = ref(null)   //底部进度条外壳
const timeAll = ref(null)   //视频进度条
const isYes = ref(false)  //进度条标志
const isQp = ref(false)  //网页全屏
const isNone = ref(null)  //鼠标隐藏显示标志
const icon = ref(null)    //播放器图标
const videoName = ref(null)  //视频名称
const videoController = ref(null)  //进度条
const videoHc = ref(null) //视频缓冲
const videoMask = ref(null)  //视频控制条遮罩
const timePointer = ref(null)  //时间指针
const timeBoxC = ref(null)  //时间指针盒子
const nextTime = ref(null)  //时间指针时间显示
const hzh = ref(false)  //视频画中画标志
const tipHZH = ref(null)  //提示气泡画中画标志
const tipQp = ref(null) //提示气泡全屏标志
const tipBodyQp = ref(null)  //提示气泡网页全屏标志
const wyqpIcon = ref(null)
const hzhIcon = ref(null)
const volumeIcon =ref(null)
const bsBox = ref(null)  //倍数框
const bsIcon = ref(null)
const volumeNum = ref(100)  //视频音量控制
const volumeController = ref(null)
const volumeHeight = ref(null)
const volumeButton = ref(null)
const volumeOne = ref(null)
const svgPlayer = ref(false)   //播放暂停状态svg
let videoControllerIndex = true  //视频控制条显示状态
const flagH = ref(false)
const flagL = ref(false)
const flagA = ref(true)
const settingBox = ref(null) //视频设置框
const settingIcon = ref(null)
const tipQpF = ref('进入全屏')
let timer = null    //定时器
let cTimer = null   //控制条显示隐藏延迟定时器
let tipTimer = null  //气泡定时器
const fullC = ref(false)  //全屏标志
let vc = false   //视频控制条是否选中状态
const store = useStore()   //vuex传值
const videoUrl = ref(null)
const videoUrl2 = ref(null)
// const videoType = ref(null)
const loadTip = ref(true)
// const type = videoMy2.value
const videoLoad = ref(false)
const videoWait = ref(false)
const videoError = ref(false)
const videoOk = ref(false)
const loadTv = ref(false)
// let videoQh = store.state.videoFlag
const playerIndex = ref(store.state.videoFlag)  //播放状态
const hlsError = ref(null)
const hlsjs = new Hls()
const lookNumGet = ref(false)
// const videoUrl = ref(null)

const props = defineProps({
  url:String,
  type:String
})

watch(()=>props,()=>{
  // timeNew.value = 0
  // timeAll.value = 0
  // videoHc.value = 0
  playerInt(props.url)
},{deep:true,immediate:true})
// const emit = defineEmits([''])
onMounted(() => {
  reSize()
  window.addEventListener('resize',reSize)
  videoMy.value.addEventListener('waiting',loading())
  videoMy.value.addEventListener('playing',loadPlay())
  videoMy.value.addEventListener('loadstart', function() {
    loadTip.value = true
    videoLoad.value = true
    loadTv.value = true
    clearInterval(timer)
    timer =null
    bf.value.style = 'display:block'
    svgPlayer.value.style = 'display:block'
    pause.value.style = 'display:none'
    playerIndex.value = false
  })
  videoMy.value.addEventListener('error', function() {
    videoError.value = true
    loadPlay()
  })
  videoMy.value.addEventListener('canplay', function() {
    videoOk.value = true
    loadPlay()
  })
  videoMy.value.addEventListener('seeked', function() {
    loadTv.value = true
  })
  videoMy.value.addEventListener('play', function(e) {
    loadTv.value = false
  })

    pause.value.style = 'display:none'
    videoMy.value.oncanplay = () => {
      startTime.value = timefrom(videoMy.value.currentTime)
      endTime.value = timefrom(videoMy.value.duration)
      nextTimeUp()
    }
  // if (cookie.get("lookNum") !== true || cookie.get("lookNum") === undefined){

  //   cookie.set("lookNum",true)
  // }
  // if (cookie.get("lookNum") !== true || cookie.get("lookNum") === undefined){
  //   API({ url: '/api/lookNowGet/'+route.query.look, method: 'get'}).then(res => {
  //     lookNumSpan.value = res.data
  //   }).catch(err => {
  //
  //   })

  // }
  lookNumSpan.value = Math.floor(Math.random() * (20 - 1 + 1) ) + 1
})
// window.onbeforeunload = onbeforeunload_handler;
// window.onunload = onunload_handler;
// function onbeforeunload_handler(){
//   let xhr = new XMLHttpRequest()
//   xhr.open('get','http://localhost:8080/api/lookNowDel/'+route.query.look)
//   xhr.send()
//   xhr.addEventListener('load',function () {
//
//   })
// }
// function lookNum() {
//   if (lookNumGet.value === false){
//     API({ url: '/api/lookNow/'+route.query.look, method: 'get'}).then(res => {
//       lookNumSpan.value = res.data
//     }).catch(err => {
//
//     })
//     lookNumGet.value = true
//
//   }
// }
// videoUrl.value = props.url
document.onkeydown = function(event){
  if (event.code === 'ArrowRight'){
    videoMy.value.currentTime = videoMy.value.currentTime +5
    nextTimeUp()
  }else if (event.code === 'ArrowLeft'){
    videoMy.value.currentTime = videoMy.value.currentTime -5
    nextTimeUp()
  }else if (event.target.nodeName === 'TEXTAREA' || event.target.nodeName === 'INPUT') {
    return;
  }
    if (event.code === 'Space') {
    startPlayer()
    return false;
  }
}
function loading() {
  videoWait.value = true
}
function loadPlay() {
  loadTv.value = false
  setTimeout(() =>{
    videoWait.value = false
    videoLoad.value = false
    loadTip.value = false
    videoOk.value = false
    videoError.value = false
    hlsError.value = false
  },2000)
}
onBeforeUnmount(() => {
  window.removeEventListener('resize',reSize)
  videoMy.value.removeEventListener('waiting',loading())
  videoMy.value.removeEventListener('playing',loadPlay())
  videoMy.value.removeEventListener('loadstart')
  videoMy.value.removeEventListener('error')
  videoMy.value.removeEventListener('canplay')
  videoMy.value.removeEventListener('seeked')
  videoMy.value.removeEventListener('play')

})
function reSize() {
  videoPlayerWH.value.style = 'width:'+(document.body.offsetWidth*0.68-40)+'px;height:'+((document.body.offsetWidth*0.62-40)*0.6-2)+'px'
}
function timeBox() {
  timer = setInterval(() => {
    nextTimeUp()
  },150)
}
//倍数控制
function bsClick(a,b) {
  videoMy.value.playbackRate = a
  IconMoveOut(b)
}
//设置控制
function settingClick(a) {
  if (a === 'flagH'){
    flagH.value = !flagH.value
    if (flagH.value === true){
      videoMy.value.style = 'transform: rotateY(180deg)!important;'
    }else {
      videoMy.value.style = 'transform: rotateY(0);'
    }
  }else if (a === 'flagL'){
    flagL.value = !flagL.value
    if (flagL.value === true){
      videoMy.value.loop = true
    }else {
      videoMy.value.loop = null
    }
    console.log(videoMy)
  }else if (a === 'flagA'){
    flagA.value = !flagA.value
    if (flagA.value === true){
      videoMy.value.autoplay = true
    }else {
      videoMy.value.autoplay = null
    }
  }
}
function mouseIn(a,b,c,d) {
  tipTimer = setTimeout(() => {
    a.style = 'left:'+(b.offsetLeft - c)+'px;display:block'
  },d)
}
function mouseOut(a,b,c) {
  clearTimeout(tipTimer)
  a.style = 'left:'+(b.offsetLeft - c)+'px;display:none'
}
function mouseIn3() {
  tipTimer = setTimeout(() => {
    if (fullC.value === false){
      tipQpF.value = '进入全屏'
    }else {
      tipQpF.value = '退出全屏'
    }
    tipQp.value.style = 'display:block'
  },600)
}
function mouseOut3() {
  clearTimeout(tipTimer)
  tipQp.value.style = 'display:none'
}
function IconMove(a,b,c) {
  clearTimeout(cTimer)
  vc = true
  a.style = 'left:'+(b.offsetLeft -c)+'px;display:block'
}
function IconMoveOut(a) {
  vc = false
  noneController()
  a.style = 'display:none'
}
function mouseInBs(a,b,c,d) {
  tipTimer = setTimeout(() => {
    a.style = 'left:'+(b.offsetLeft -c)+'px;display:block'
  },d)
}
function mouseOutBs(a) {
  clearTimeout(tipTimer)
  a.style = 'display:none'
}
function nextTimeUp() {
  startTime.value = timefrom(videoMy.value.currentTime)
  timeNew.value.style = 'width:'+(videoMy.value.currentTime/videoMy.value.duration)*100+'%;'
  timeNew2.value.style = 'width:'+(videoMy.value.currentTime/videoMy.value.duration)*100+'%;'
  if (videoMy.value.buffered.length !== 0){
    videoHc.value.style = 'width:'+ videoMy.value.buffered.end(videoMy.value.buffered.length -1) / videoMy.value.duration*100 +'%;'
  }
}
function startPlayer() {
  if (!playerIndex.value){
    // console.log("开始播放")
    videoMy.value.play()
    timeBox()
    bf.value.style = 'display:none'
    svgPlayer.value.style = 'display:none'
    pause.value.style = 'display:block'
    playerIndex.value = true
  }else {
    // console.log("暂停")
    videoMy.value.pause()
    clearInterval(timer)
    timer =null
    bf.value.style = 'display:block'
    svgPlayer.value.style = 'display:block'
    pause.value.style = 'display:none'
    playerIndex.value = false
  }

}
function playerInt() {
  if (props.type === 'm3u8'){
    if (Hls.isSupported()) {
      hlsjs.loadSource(decodeURIComponent(props.url))
      hlsjs.attachMedia(videoMy.value)

      hlsjs.on(Hls.Events.MANIFEST_PARSED, () => {
        // setTimeout(() => {
        //   startPlayer()
        // },500)
      })
      hlsjs.on(Hls.Events.ERROR, (event, data) => {
        hlsError.value = true
      })
    }
  }else {
    videoUrl2.value = props.url
  }
}
function clickVideo(e) {
  videoMy.value.currentTime = Math.floor(e.offsetX) / Math.floor(timeAll.value.offsetWidth) * videoMy.value.duration
  timeNew.value.style = 'width:'+e.offsetX / timeAll.value.offsetWidth*100+'%'
  timeNew2.value.style = 'width:'+e.offsetX / Math.floor(timeAll.value.offsetWidth)*100+'%'
  videoHc.value.style = 'width:'+ videoMy.value.buffered.end(videoMy.value.buffered.length -1) / videoMy.value.duration*100 +'%'
}
function noneController() {
  clearTimeout(cTimer)
  cTimer = setTimeout(() => {
    if (!vc){
      setTimeout(() => {
        isNone.value = true
        videoController.value.style = 'opacity: 0;'
        timeNew2W.value.style = 'opacity: 1;'
        videoMask.value.style = 'opacity: 0;'
        videoName.value.style = 'display:none;'
      },1000)
    }
  },1000)
}
function iconMove() {
  isYes.value =true
  // icon.value.style = 'display:block'
}
function iconStop() {
  // console.log("触发2")
  isYes.value = false
  // icon.value.style = 'display:none'
}
function mouseIng() {
  mouseMove()
  noneController()
}
function mouseCMove() {
  // console.log("进入")
  vc = true
  mouseMove()
}
function mouseCStop() {
  // console.log("出去")
  vc = false
}
function mouseMove() {
  isNone.value = false
  videoController.value.style = 'opacity: 1;'
  timeNew2W.value.style = 'opacity: 0;'
  videoMask.value.style = 'opacity: 1;'
  if (fullC.value === true) {
    videoName.value.style = 'display:block;'
  }
}
function mouseStop() {
  clearTimeout(cTimer)
  videoController.value.style = 'opacity: 0;'
  timeNew2W.value.style = 'opacity: 1;'
  videoMask.value.style = 'opacity: 0;'
  videoName.value.style = 'display:none;'
}
function mousePointerIng(e) {
  timePointer.value.style = 'left:'+e.offsetX+'px'
  timeBoxC.value.style = 'left:'+(e.offsetX + videoPlayerWH.value.offsetWidth * 0.01 - timeBoxC.value.offsetWidth /2)+'px;'
  nextTime.value = timefrom(Math.floor(e.offsetX) / Math.floor(timeAll.value.offsetWidth) * videoMy.value.duration)
  // console.log(videoPlayerWH.value.offsetWidth * 0.1)
}
function htmlFull() {
  if (isQp.value === false){
    isQp.value = !isQp.value
  }else {
    isQp.value = !isQp.value
    cs.value = 0
  }
}
function onHZH() {
  if (hzh.value){
    hzh.value = false
    document.exitPictureInPicture()
  }else {
    hzh.value = true
    videoMy.value.requestPictureInPicture()
  }
}
function full() {
  fullC.value = !fullC.value
  if (!fullC) {
    videoPlayerWH.value.requestFullscreen();
  } else if (videoPlayerWH.value.mozRequestFullScreen) {
    videoPlayerWH.value.mozRequestFullScreen();
  } else if (videoPlayerWH.value.webkitRequestFullscreen) {
    videoPlayerWH.value.webkitRequestFullscreen();
  } else if (videoPlayerWH.value.msRequestFullscreen) {
    videoPlayerWH.value.msRequestFullscreen();
  }
  if(document.exitFullScreen) {
    document.exitFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if(element.msExitFullscreen) {
    element.msExitFullscreen();
  }
  isQp.value = false
}
function timefrom(timers) {
  let result = parseInt(timers)
  let h =
    Math.floor(result / 3600) < 10
      ? '0' + Math.floor(result / 3600)
      : Math.floor(result / 3600)
  let m =
    Math.floor((result / 60) % 60) < 10
      ? '0' + Math.floor((result / 60) % 60)
      : Math.floor((result / 60) % 60)
  let s =
    Math.floor(result % 60) < 10
      ? '0' + Math.floor(result % 60)
      : Math.floor(result % 60)
  if (h === '00'){
    return `${m}:${s}`
  }else {
    return `${h}:${m}:${s}`
  }
}
function slider(){
    //滑动事件 作用在document上，因为如果是作用在hd.onmousemove，滑动时可能会出现鼠标脱离hd范围（范围太小）而停止滑动，但是此时鼠标按下还没有弹起还处于滑动状态，所以就产生了bug

      if (fullC.value === false) {
        document.onmousemove = function(e) {
          volController(45, 0, e)
        }
      }else {
        document.onmousemove = function(e) {
          volController(-55, 50, e)
        }
      }

    //当鼠标弹起时清除滑动,所以用document监听弹起事件
    document.onmouseup = function(){
      document.onmousemove = null;
    }
}
function volController(num,num2,ev){
  // console.log(document.getElementsByClassName("volumeBox").offsetTop)
  // console.log(document.getElementsByClassName("volLineBox").offsetTop)
  // console.log("e:",ev.pageY)
  // console.log(document.querySelector(".videoPlayerBox").offsetY);

  // if (cs.value){
  //   console.log(cs.value)
    volumeButton.value.style.bottom = ((50 - (ev.clientY - (volumeController.value.offsetTop + volumeOne.value.offsetHeight + num2))) + num) + "px";

    volumeNum.value = Math.floor(((50 - (ev.clientY - (volumeController.value.offsetTop + volumeOne.value.offsetHeight + num2))) + num) / 50 * 100)
    //临界值判断
    if(((50 - (ev.clientY - (volumeController.value.offsetTop + volumeOne.value.offsetHeight + num2))) + num) < 0){
      volumeButton.value.style.bottom = 0;
      volumeNum.value = 0;
      videoMy.value.volume = volumeNum.value
    }
    else if(((50 - (ev.clientY - (volumeController.value.offsetTop + volumeOne.value.offsetHeight + num2))) + num) > 50){
      volumeButton.value.style.bottom = 50+"px";
      volumeNum.value = 100;
      videoMy.value.volume = 1
    }
    volumeHeight.value.style.height = volumeButton.value.style.bottom;
    videoMy.value.volume = volumeNum.value / 100
  // }else {
  //   console.log(cs.value)
  //   let volNum = -(ev.pageY - volumeController.value.offsetTop-120)+50
  //   volumeButton.value.style.bottom = volNum + "px";
  //   volumeNum.value = Math.floor(volNum / 50 * 100)
  //   if(volNum < 0){
  //     volumeButton.value.style.bottom = 0;
  //     volumeNum.value = 0;
  //     videoMy.value.volume = volumeNum.value
  //   }
  //   else if(volNum > 50){
  //     volumeButton.value.style.bottom = 50+"px";
  //     volumeNum.value = 100;
  //     videoMy.value.volume = 1
  //   }
  //   volumeHeight.value.style.height = volumeButton.value.style.bottom;
  //   videoMy.value.volume = volumeNum.value / 100
  // }
}

</script>

<style lang="less" scoped>
.loadOne{
  width: 320px;
  height: 184px;
  background: url("http://mcgamehome.love/img2/mask/loading.png") no-repeat;
  -webkit-transform: scale(.5);
  transform: scale(.5);
  -webkit-animation: bpx-animation-loading .94s steps(1) infinite;
  animation: bpx-animation-loading .94s steps(1) infinite;
}
.loadIng{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  //position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  //justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Switch开关样式 */
/* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */
.switch{
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 40px;
  height: 20px;
  background-color: hsla(0, 0%, 59%, 0.7);
  border-radius: 10px;
  transition: border-color .3s, background-color .3s;
}

.switch::after {
  content: '';
  display: inline-block;
  width: 16px;
  height:16px;
  border-radius: 50%;
  background: #fff;
  //box-shadow: 0, 2px, #999;
  transition:.4s;
  top: 2px;
  position: absolute;
  left: 2px;
}

.switchs {
  background: #d272a4;
}
/* 当input[type=checkbox]被选中时：伪元素显示下面样式 位置发生变化 */
.switchs::after {
  content: '';
  position: absolute;
  left: 55%;
  top: 2px;
}
.settingBox{
  display: none;
  width: 110px;
  position: absolute;
  user-select: none;
  bottom: 60px;
  background-color: hsla(0, 0%, 7%, 0.6);
  border-radius: 2px;
  z-index: 10;
  padding: 10px 15px;
}
.settingBox::after{
  content: '';
  width: 100%;
  height: 20px;
  background-color: transparent;
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index: 10;
}
.settingOne{
  color: white;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  padding: 5px 0;
}
.settingOne:hover{
  color: #d272a4;
}
.settingOne>span{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.bsBox{
  display: none;
  position: absolute;
  bottom: 60px;
  background-color: hsla(0, 0%, 7%, 0.6);
  border-radius: 2px;
  z-index: 10;
}
.bsBox::after{
  content: '';
  width: 100%;
  height: 20px;
  background-color: transparent;
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index: 10;
}
.bsBoxS{
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  overflow: hidden;
}
.bsBoxS>span{
  display: flex;
  justify-content: center;
  padding: 5px 15px;
  color: white;
  user-select: none;
}
.bsBoxS>span:hover{
  background-color: #d272a4;
}

.svgPlayer{
  position: absolute;
  width: 90px;
  right: 70px;
  bottom: 75px;
  z-index: 5;
  //pointer-events: none;  //点击穿透
}
.numBox{
  padding-top: 6px;
  padding-bottom: 10px;
  min-width: 18px;
  min-height: 12px;
  user-select: none;
  display: flex;
  justify-content: center;
  align-content: center;
}
.vol{
  font-size: 12px;
  color: white;
}
.volumeBox{
  display: none;
  position: absolute;
  bottom: 60px;
  padding: 0 8px 15px 8px;
  background-color: hsla(0, 0%, 7%, 0.6);
  border-radius: 2px;
  z-index: 10;
}
.volumeBox::after{
  content: '';
  width: 100%;
  height: 20px;
  background-color: transparent;
  position: absolute;
  bottom: -20px;
  left: 0;
}
.volLineBox{
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}
.volumeOne{
  position: relative;
  height: 50px;
  padding: 0 2px;
}
.volumeLine{
  display: flex;
  justify-content: flex-end;
  width: 2px;
  height: 50px;
  background-color: #d272a4;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.lineWaiKe{
  width: 2px;
  height: 50px;
  position: relative;
  user-select: none;
  display: flex;
  justify-content: flex-end;
}
.volumeButton{
  width: 10px;
  height: 10px;
  border-radius: 50px;
  position: absolute;
  background-color: white;
  left: -4px;
  bottom: 45px;
}
.bs{
  font-size: 14px;
}
.inQp{
  right: 10px;
}
.tipFont{
  padding: 5px 10px;
  position: absolute;
  bottom: 60px;
  font-size: 12px;
  color: white;
  background-color: hsla(0, 0%, 100%, 0.3);
  border-radius: 2px;
  display: none;
  z-index: 6;
}
.timeBox{
  position: absolute;
  padding: 5px 10px;
  z-index: 9;
  bottom: 60px;
  border-radius: 4px;
  color: white;
  background-color: hsla(0, 0%, 100%, 0.3);
}
.videoName{
  display: none;
  padding-top: 20px;
  padding-left: 25px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: white;
  height: 70px;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}
.videoName0ne{
  font-size: 19px;
}
.noneCursor{
  cursor: none;
}
.bottomTimeWaiKe{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  //background-color: hsla(0, 0%, 100%, 0.5);
}
.bottomTime{
  width: 0;
  height: 2px;
  //background-color: #00A1D6;
  background-color: hsla(0, 0%, 100%, 0.5);
}
.timeFG{
  margin: 0 5px;
}
.pause{
  height: 41px;
  position: absolute;
  left: 13px;
  top: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  margin: 0 12.5px;
}
.pause>svg{
  width: 25px;
  fill: white;
}
.video-de{
  display: inline-block;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: inherit;
}
.fontHt{
  font-family: "黑体";
  font-weight: bold;
}
.bufferWaiKe{
  width: 100%;
  display: flex;
  justify-content: center;
}
.p-r{
  position: relative;
}
.videoPlayerBox{
  overflow: hidden;
  position: relative;
  //background: black;
}
.videoHtml{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 100;
}
.COMZSVG{
  width: 18px;
  height: 18px;
  margin: 0 15px;
}
.comNum{
  font-size: 15px;
}
.upCom{
  margin-left: 50px;
  font-size: 15px;
}
.dm-controller-box{
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dm-controller-box>svg{
  width: 25px;
  background-color: white;
}
.videoShow-WaiKe{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 8px #f1f2f3;
}
.videoController{
  width: 100%;
  height: 56px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  z-index: 1;
}
/* 视频进度条 */
.sp-jdt{
  width: 98%;
  height: 2px;
  position: relative;
  padding: 6px 0 5px 0;
}

.videoTimeWaiKe{
  width: 100%;
  background-color: hsla(0,0%,100%,.2);
  position: relative;
  z-index: -1;
}
.videoIcon{
  position: absolute;
  bottom: -8px;
  right: -8px;
  z-index: -3;
  user-select: none;
}
.videoButtonMask{
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100px;
  position: absolute;
  pointer-events: none;
  background: url(http://mcgamehome.love/img2/mask/download.png) repeat-x bottom;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
}
/* 视频缓冲 */
.sp-hc{
  width: 0;
  height: 2px;
  background-color: hsla(0,0%,100%,.3);
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 0;
}
.videoPlayerTimeNew{
  width: 0;
  position: relative;
  height: 2px;
  background-color: #00A1D6;
  z-index: 2;
}
/* 视频控制器 */
.videoControllerSetting{
  display: flex;
  vertical-align: middle;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 41px;
  user-select: none;
}
.flex-left{
  display: flex;
  justify-content: center;
}
.flex-right{
  display: flex;
  justify-content: flex-end;
  align-content: center;
}
.sp-before-time{
  display: flex;
  align-items: center;
  font-family: "Oxanium";
  font-weight: bold;
  margin-left: 15px;
  font-size: 16px;
  color: white;
}
.yl>i{
  font-size: 30px;
}
.sz>i{
  font-size: 20px;
  margin-right: 10px;
}
.hzh>i{
  font-size: 22px;
  margin-right: 10px;
}
.bf{
  display: flex;
  margin: 0 12px 0 25px;
  color: white;
  align-content: center;
}
.bf>svg{
  width: 25px;
  fill: white;
}
.nextOne{
  display: flex;
}
.nextOne>svg{
  width: 25px;
  fill: white;
}
.svgBox{
  display: flex;
  align-items: center;
  margin-right: 15px;
  color: white;
}
.zm{
  width: 30px;
  height: 100%;
}
.yl{
  width: 25px;
  height: 100%;
}
.sz{
  width: 23px;
  height: 100%;
}
.hzh{
  width: 25px;
  height: 100%;
}
.wyqp{
  width: 27px;
  height: 100%;
}
.qp{
  width: 25px;
  height: 100%;
}
.mar-r-15{
  margin-right: 25px;

}
.svgBox>svg{
  width: 100%;
  height: 100%;
}
.controler-font{
  margin-right: 15px;
  font-size: 15px;
  color: white;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
}
.dmBox{
  /* width: 100%; */
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  height: 40px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 8px 20px 8px 20px;
  background: #fff;
}
/* 观看人数 */
.start-my{
  /* width: 100%; */
  height: 34px;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-start;
  position: relative;
}
.span-ys{
  font-family: "黑体";
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 20px;
  color: #505050;
}
.span-ys2{
  width: 100%;
  /* min-width: 200px; */
  font-family: "黑体";
  font-weight: bold;
  font-size: 14px;
  color: #505050;
  margin-right: 15px;
}
.dmSetting{
  display: flex;
  margin-right: 5px;
}
/* 弹幕框 */
.dmk{
  /* width: 100%; */
  height: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex: auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
#dmk{
  width: 100%;
  height: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  //white-space: nowrap;
  outline: none;
  border: none;
  background: #f4f4f4;
  padding: 0;
}
.srk{
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex-align: center;
  -ms-flex-positive: 1;
  position: relative;
  color: #999;
  justify-content: flex-end;
  /* padding: 5px 0; */
}
/* 弹幕设置 */

/* 弹幕字体 */
.fontSetting{
  padding: 0 0 0 5px;
  height: 100%;
  font-size: 20px;
  color: #757575;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background:#f4f4f4;
}
/* 发送按钮 */
/* .dmfs{
	background-color: #00A1D6;
	padding: 0;
}*/
.loadingBox{
  position: absolute;
  left: 20px;
  bottom: 60px;
  //display: none;
  z-index: 55;
  pointer-events: none;
}
.loadingTip{
  width: 105px;
  padding: 5px 10px;
  color: white;
  font-size: 14px;
  transition: 0.3s;
  background-color: hsla(0, 0%, 100%, 0.3);
  margin-bottom: 5px;
  border-radius: 2px;
  user-select: none;
}
.width-92{
  width: 92px;
}
.width-110{
  width: 200px;
}
.commentDmUp{
  height: 100%;
}
.commentDmUp>button{
  display: flex;
  width: 70px;
  height: 100%;
  min-width: 70px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #00a1d6;
  border:none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  color: white;
  justify-content: center;
  align-items: center;
}

/* 视频数据 */
.videoDateShowBox{
  color: #5b5b5b;
  font-size: 15px;
  height: 50px;
  display: flex;
  border-bottom: 1px solid #e7e7e7;
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
}
.videoDateShowBoxRight,.videoDateShowBoxLeft{
  display: flex;
  align-items: center;
}
.videoDateShowBox-right>i{
  font-size: 16px;
  color: #939393;
}
.showDataNum{
  font-size: 18px;
}
.ZSVG{
  width: 28px !important;
  margin-right: 5px;
}
.None{
  display: none;
}
.videoNewTime{
  position: absolute;
  width: 8px;
  height: 12px;
  //overflow: hidden;
  pointer-events: none;
  //visibility: hidden;
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
  margin-left: -5px;
  left: 50px;
  z-index: 8;
  top: 0;
}
.videoNewTime>div{
  width: 0;
  height: 0;
  position: relative;
  border-style: solid;
}
.timePointer-top{
  border-width: 5px 5px 0;
  border-color: #00a1d6 transparent transparent;
  border-top-color: #00a1d6;
}
.timePointer-bottom{
  margin-top: 4px;
  border-width: 0 5px 5px;
  border-color: transparent transparent #00a1d6;
  border-bottom-color: #00a1d6;
  border-right-color: transparent;
  border-top-color: transparent;
}
@-webkit-keyframes bpx-animation-loading {
  0% {
    background-position: 0 0
  }

  6.25% {
    background-position: -320px 0
  }

  12.50% {
    background-position: -640px 0
  }

  18.75% {
    background-position: -960px 0
  }

  25.00% {
    background-position: -1280px 0
  }

  31.25% {
    background-position: -1600px 0
  }

  37.50% {
    background-position: -1920px 0
  }

  43.75% {
    background-position: -2240px 0
  }

  50.00% {
    background-position: -2560px 0
  }

  56.25% {
    background-position: -2880px 0
  }

  62.50% {
    background-position: -3200px 0
  }

  68.75% {
    background-position: -3520px 0
  }

  75.00% {
    background-position: -3840px 0
  }

  81.25% {
    background-position: -4160px 0
  }

  87.50% {
    background-position: -4480px 0
  }

  93.75% {
    background-position: 0 -184px
  }

  100.00% {
    background-position: -320px -184px
  }
}

@keyframes bpx-animation-loading {
  0% {
    background-position: 0 0
  }

  6.25% {
    background-position: -320px 0
  }

  12.50% {
    background-position: -640px 0
  }

  18.75% {
    background-position: -960px 0
  }

  25.00% {
    background-position: -1280px 0
  }

  31.25% {
    background-position: -1600px 0
  }

  37.50% {
    background-position: -1920px 0
  }

  43.75% {
    background-position: -2240px 0
  }

  50.00% {
    background-position: -2560px 0
  }

  56.25% {
    background-position: -2880px 0
  }

  62.50% {
    background-position: -3200px 0
  }

  68.75% {
    background-position: -3520px 0
  }

  75.00% {
    background-position: -3840px 0
  }

  81.25% {
    background-position: -4160px 0
  }

  87.50% {
    background-position: -4480px 0
  }

  93.75% {
    background-position: 0 -184px
  }

  100.00% {
    background-position: -320px -184px
  }
}
</style>
